JavaScript事件处理中函数名是否带括号的原理与区别

事件处理概述

本文总结一个关于事件处理程序的关键细节。首先回顾事件处理的基本概念。

JavaScript中的事件处理（即事件绑定）旨在让特定事件触发相应的行为。常见的绑定方式分为DOM Level 0和DOM Level 2两种。两者的核心区别在于：DOM 0级事件处理仅支持事件冒泡，而DOM 2级事件处理可以通过设置第三个参数，灵活选择支持事件冒泡或事件捕获。

DOM 0级事件处理通常是将一个函数直接赋值给事件处理程序。这可以通过两种方式实现：一是在HTML元素中直接指定事件处理程序（如方式一所示）；二是在JavaScript脚本中将函数赋值给事件处理程序（如方式二所示）。

<!--方式一-->
<div onclick="fun1();fun2('world!');"></div>
<!--方式二-->
<div id="a">点我</div>
<script>
var a=document.getElementById("a");
a.onclick=fun1; //方式二 
function fun1(){
alert("hello!");
}
function fun2(cc){
alert(cc);
}
</script>

上述示例展示了两种方式的差异：第一种方式允许同时绑定多个处理函数，但需注意这些函数必须是全局定义的，否则可能抛出Reference错误。第二种方式每次只能绑定一个处理函数，若再次赋值，新函数会覆盖旧函数。

DOM 2级事件处理不直接绑定处理函数，而是将其注册为事件监听器。这种方式可以绑定多个处理函数且互不覆盖。然而，该方式存在浏览器兼容性问题，在IE浏览器中需使用attachEvent方法替代。

a.addEventListener("click",fun1,false); //事件冒泡
a.addEventListener("click",anotherFun,false); //不会覆盖上一事件，均被执行

函数名后括号的执行差异

简要回顾至此，回到核心问题：在引用函数时，函数名称后有时加括号，有时不加。这对程序运行有何具体影响？经查阅资料并结合理解，总结如下。

首先分析加括号的情况。在代码中常看到“fun1();”的写法，函数名后加括号表示立即执行该函数，若函数有返回值，则获取该值。若习惯在所有调用处都这样写，例如在事件处理函数中，可能导致失控。例如，本意是想在点击元素时执行函数，结果函数却在页面加载时立即执行。因此，前文示例中的DOM 0方式二和DOM 2级事件处理函数均未在函数名后加括号，目的是避免这种立即执行的情况。若加了括号，函数fun1会被立即触发执行。

那么，为什么DOM 0方式一中却使用了括号？这是因为HTML标签的事件属性中，引号内的内容会被当作JavaScript语句直接执行，加上括号才能确保调用并执行函数。由于这种方式是通过元素标签绑定的事件，其执行时机自然被控制在点击该标签时触发。

若没有函数名却想立即执行，即立即执行匿名函数表达式（IIFE），这种模式非常常见。观察其末尾是否有立即执行的小括号？注意，这种IIFE形式中包裹整个函数体的小括号会限制作用域。对IIFE感兴趣的可查阅相关资料，此处不再赘述。

(function(){
//do something...
})();

函数引用与有参函数处理

接下来分析不加括号的情况。前文提到，不加括号可避免失控，因为此时仅将函数名传递给事件，相当于将函数指针（即函数的入口地址）传递给元素事件。这样做的好处是可以在需要时找到并执行函数。打个比方：加括号时，朋友立即出现在你面前，不管你当时是否忙碌，这种“不请自来”可能带来不适；而不加括号时，朋友只告诉你他的住址，你需要时再去拜访，这才是贴心的做法。因此，大多数事件绑定仅传递函数指针（即函数名）。

此时又有一个问题：前文讨论的都是无参函数，若像代码示例中的fun2那样是有参函数，该如何处理？难道只能使用DOM 0方式一吗？当然不是。应尽量避免使用DOM 0方式一，因为它不符合结构与行为分离的原则。通常这种情况下，使用匿名函数解决，如代码所示。若有其他好建议，欢迎留言分享。

//DOM Level 0
a.onclick=function(){
fun2("world!");
};
//DOM Level 2
a.addEventListener("click",function(){fun2("world!");},false);

以上为个人总结，如有错误请指正。感谢一起学习的小伙伴陈童鞋，正是他提出的问题让我注意到了这个常被忽略的细节。

以上所述是小编给大家介绍的JS中关于事件处理函数名后面是否带括号的问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！