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));

注意bindreturns函数。这个例子应该澄清它：

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()是什么函数returns

如果您想成为一名优秀的编码员，您不应该满足于它有效！。值得花一些时间来找出 为什么 它有效。如果没有这一步，您将无法确定您的代码在某些情况下是否不包含隐藏的错误。

您在尝试过的解决方案中的内容是Programming by permutation which is an antipattern - I highly recommend reading this great wiki article about antipatterns。

Answer 2

如果出于某种原因你必须按照你想要的方式去做

el.addEventListener('click', function(e) { 
    someFunction(e.target);
}, false);

但 Jan Turoň 给出的答案是首选方式

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

addEventListener to an element, with the element itself as parameter

javascript

bind

onclick

this

addeventlistener

解决方案

备选方案

建议