javascript - addEventListener 到一个元素，元素本身作为参数

Question

首先，对不起，如果标题不是最好的，我找不到更好的。

如何使用javascript将函数设置为Div的clickEvent，同时还将函数的参数设置为Div本身？
例如:

我有一个 HTML 具有以下内容的文件:

<span id='parent'>
    <div class='child'></div>
</span>

还有一个 JS 我有以下代码的文件:

var el = document.getElementById("parent").getElementsByClassName("child")[0];
el.onclick = someFuntion(this);

但问题是，我想要 this参数引用 div.child ，所以当我单击 Div 时，它应该将自身作为参数传递，作为 DOM 元素，使我能够在 someFuntion(element) 中使用它就像任何其他 DOM 元素一样: element#id ， 例如。

尝试的解决方案:

el.addEventListener("click", someFuntion(event), false);
el.addEventListener("click", someFuntion(this), false);
el.addEventListener("click", someFuntion(el), false);
$("#parent #child").bind("click", someFuntion(this));
el.onclick = someFuntion(divIntoSpan);

解决方案:
el.onclick = someFuntion;

function someFunction(e){
    if(e.target){
        //remember to use "e.target" from here on, instead of only "e"
        //e.id (error: undefined); e.target.id (correct)
    }
}

Answer 1

解决方案

就做el.addEventListener("click", someFunction); <- 不是 someFunction()
然后使用 event.target

function someFunction(e) {
   if(e.target) ...
}

替代解决方案

如果您喜欢@JaromandaX 的解决方案，您可以将其简化为

el.addEventListener("click",someFunction.bind(null,el));

请注意 bind返回函数。这个例子应该澄清它:

function someFunction(el) {
  // if used with bind below, the results are:
  console.log(this); // "This is it!"
  console.log(el); // the clicked element
}

a.addEventListener("click",someFunction.bind("This is it!",a));

建议

someFunction是函数本身

someFunction()是函数返回的

如果你想成为一名优秀的程序员，你不应该满足于 It works!。值得花些时间了解 为什么有用。如果没有这一步，您将无法确定您的代码在某些情况下是否不包含隐藏的错误。

您在解决方案中尝试过的是 Programming by permutation这是一个反模式——我强烈推荐阅读这个伟大的 wiki article about antipatterns .