将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元素，使我能够像使用任何其他DOM元素一样在someFuntion(element)中使用它：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 = 某个函数;

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

- alexluz

---

当你使用el.onclick = someFunction(this);时，你并没有传递一个函数指针。你实际上是将el.onclick的值设置为someFunction(this)的计算结果。 - Jason Gerard

只是提醒一下你的标记。span 元素只允许包含短语内容，而 div 元素不允许。 - Andreas

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() 是函数返回的内容

如果你想成为一名优秀的编码人员，仅仅满足于“可以工作”是不够的。值得花些时间去找出为什么它能够工作。如果不进行这一步，你不能确定你的代码是否在某些情况下包含隐藏的错误。

你所拥有的“尝试的解决方案”是排列编程，这是一个反面模式 - 我强烈推荐阅读这篇关于反面模式的精彩维基文章。

- Jan Turoň

---

@alexluz 我更新了答案以让它对你更有用。祝你好运。 - Jan Turoň

Answer 2

如果出于某种原因，您必须按照您想要的方式进行操作

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

但是Jan Turoň提供的答案是首选方法。

- Jaromanda X

---

你的解决方案也有效，我标记了上面那个作为更清晰的代码，正如你所说。但是知道有许多方法来做这件事总是好的。谢谢！ - alexluz