在javascript中捕获事件答案

【问题标题】：Capturing events in javascript在javascript中捕获事件
【发布时间】：2012-01-26 17:52:33
【问题描述】：

<!doctype html>
<html>

<body>
<div id = 'div' style = 'width:100px;height:100px;background:#000000;'></div>
<script type = 'text/javascript'>
document.getElementById('div').addEventListener('click',happen(),true);
function happen()
{
    alert(1)
}
</script>
</body>
</html>

在上面的代码中，为什么在页面加载时触发事件，而不是在我单击 div 时触发...这也是正确的事件名称 click 或 onclick...。

【问题讨论】：

标签： javascript events addeventlistener event-bubbling event-capturing

【解决方案1】：

这是因为您立即调用了该函数，并将其 null 结果传递给addEventListener()。

应该是：

document.getElementById('div').addEventListener('click',happen,true);

如果你想将参数传递给happen，你必须这样写：

document.getElementById('div').addEventListener('click', function() {
    happen(args_here, ...); 
}, true);

【讨论】：

【解决方案2】：

您正在调用函数立即并将其返回值传递给addEventListener，就像任何其他函数调用一样。
取出()。

【讨论】：

【解决方案3】：

这应该可行：

document.getElementById('div').addEventListener('click',happen,true);

【讨论】：

【解决方案4】：

问题出在这一行：

document.getElementById('div').addEventListener('click',happen(),true);

您应该只传递函数的名称happen，但由于您添加了括号，因此您正在传递结果。

试试这个：

document.getElementById('div').addEventListener('click',happen,true);

【讨论】：

那么我如何为函数传递参数
@JinuJD 您必须将函数调用包装在 another 匿名函数中
对不起，我不明白......包装是什么意思......你能给我举个例子吗？

【解决方案5】：

正如其他回答者所说，取出 () 将解决问题。

OO Javascript 的另一种选择和良好实践是将函数包装在 function(){ } 中，如下所示：

document.getElementById('div').addEventListener('click',function(){happen()},true);

如果回调需要在对象内执行（在这种情况下不需要），它将保留范围。

【讨论】：

恕我直言，除非您确实需要它，否则引入新范围不是好习惯。
是的，我通常确实需要它；）而且全局窗口对象越少越好。
您的版本引入的“全局窗口对象”（我认为您实际上是指“全局变量”）不只是写happen。

【解决方案6】：

事件处理程序不需要括号

 document.getElementById('div1').addEventListener('click',happen,true);

【讨论】：