Question

我有这个函数检查（e）当我将它添加到eventListener时，我希望能够从test（）传递参数。这可能吗？就像说让mainlink变量通过参数。这样做会不错？

我把javascript放在下面，我也在jsbin：http://jsbin.com/ujahe3/9/edit

上

function test() {
  if (!document.getElementById('myid')) {
  var mainlink = document.getElementById('mainlink');
  var newElem = document.createElement('span');
  mainlink.appendChild(newElem);
  var linkElemAttrib = document.createAttribute('id');
  linkElemAttrib.value = "myid";
  newElem.setAttributeNode(linkElemAttrib);

  var linkElem = document.createElement('a');
  newElem.appendChild(linkElem);

  var linkElemAttrib = document.createAttribute('href');
  linkElemAttrib.value = "jsbin.com";
  linkElem.setAttributeNode(linkElemAttrib);

  var linkElemText = document.createTextNode('new click me');
  linkElem.appendChild(linkElemText);

  if (document.addEventListener) {
  document.addEventListener('click', check/*(WOULD LIKE TO PASS PARAMETERS HERE)*/, false);                       
  };
};
};

function check(e) {
  if (document.getElementById('myid')) {
    if (document.getElementById('myid').parentNode === document.getElementById('mainlink')) {
      var target = (e && e.target) || (event && event.srcElement); 
      var obj = document.getElementById('mainlink'); 
      if (target!= obj) {
        obj.removeChild(obj.lastChild);
      };
    };
  };
};

Answer 1

将您的事件监听器包装到一个函数中：

document.addEventListener( 
          'click', 
           function(e,[params]){
              check(e,[params]);
           } 
);

Answer 2

在这种情况下我通常做的是保存对象的参数（只要方便），然后在函数中检索它们，如下所示：

// Listener function receives e (the event object) by default.
function eventReceiver(e) {  
  var obj;

  // Find object which triggered the event
  e.srcElement ? obj = e.srcElement : obj = e.target;

  // obj.someProperty has been set elsewhere, replacing a function parameter
  alert(obj.someProperty);   
}

这是跨浏览器，允许您通过事件目标的属性传递对象和值。

我最初使用this关键字开始，但跨浏览器的行为方式不同。在FF中，它是触发事件的对象。在IE中，它就是事件本身。因此，srcElement / target解决方案诞生了。我很想看到其他解决方案 - 有+1。

Answer 3

一种解决方案是移动＆＃34;检查＆＃34;在test（）函数中运行。作为内部函数，它可以自动引用其外部作用域中的变量。像这样：

function test() {
  if (!document.getElementById('myid')) {
  var mainlink = document.getElementById('mainlink');
  var newElem = document.createElement('span');
  mainlink.appendChild(newElem);
  var linkElemAttrib = document.createAttribute('id');
  linkElemAttrib.value = "myid";
  newElem.setAttributeNode(linkElemAttrib);

  var linkElem = document.createElement('a');
  newElem.appendChild(linkElem);

  var linkElemAttrib = document.createAttribute('href');
  linkElemAttrib.value = "jsbin.com";
  linkElem.setAttributeNode(linkElemAttrib);

  var linkElemText = document.createTextNode('new click me');
  linkElem.appendChild(linkElemText);

  if (document.addEventListener) {
  document.addEventListener('click', function(e) {

    if (document.getElementById('myid')) {
      if (document.getElementById('myid').parentNode === mainlink) {
        var target = (e && e.target) || (event && event.srcElement); 

        if (target!= mainlink) {
          mainlink.removeChild(mainlink.lastChild);
        };
      };
    };
  });
};

将参数传递给eventListener函数

3 个答案: