JS中关于事件处理函数名后面是否带括号的问题


Posted in Javascript onNovember 16, 2016

今天总结一个关于事件处理程序的小细节。首先回顾一下事件处理的一些概念。

JS中的事件处理(事件绑定)就是让某种或某些事件触发某些活动。有两种常见的形式,分别是DOM Level 0 和DOM Level 2。这两种方式最大的区别就在于DOM 0级事件处理只能用于事件冒泡,而DOM 2级事件处理却可以通过设置第三个参数来分别支持事件冒泡和事件捕获。

DOM 0级事件处理一般是直接把一个函数分配给一个事件处理程序,既可以在元素中直接分配一个事件处理程序,如方式一所示;也可以在脚本中把函数分配给事件处理程序,如方式二所示。

<!--方式一-->
<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();”,没错,函数名后边加括号表示立即执行该函数,如果函数内存在返回值则得到该值。这样用的多了,你可能就习惯在所有调用函数的地方这样写,比如之前说的事件处理函数。但是,如果你这样做了那就可能造成一些失控的状况。比如说,你明明只是想在点击某一元素的时候才执行函数,却发现这个函数在一开始就被执行了。你可以发现,上面举例时所用的DOM0方式二和DOM2级事件处理函数都没有在函数名后面加括号,原因就在于避免这种状况发生。如果你加了括号,这个函数fun1就会被立即触发执行。

那为什么DOM0方式一中却有括号呢?那是因为标签的事件属性里引号之间会被当做js语句直接执行,加了括号才能保证调用并执行函数。但是由于是用元素标签这种方式绑定的事件,执行的时机就被控制在了点击该标签时触发。

如果没有函数名又想立即执行呢?也就是立即执行匿名函数表达式,这种模式很常见,来观察一下它的屁股后面是不是也跟着个立即执行小括号呢?注意,这种IIFE形式中包裹着整个函数体的小括号会限制作用域。具体对IIFE感兴趣的童鞋可以去查阅相关资料,这里不作赘述。

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

现在再来分析不加括号的,前面我们提到了不加括号可以避免失控。是因为只将函数名传递给事件,相当于将函数指针(也就是这个函数的入口地址)传给元素事件。这样做的好处就在于可以在需要的时候找到函数并执行。打个小比喻来说,你和你的朋友会面,加了小括号时你的朋友就立即出现在你面前,他才不管你当时是不是在忙,有种不请自来的不快感;而不加括号相当于你的朋友告诉了你他家在哪,当你需要他的时候就来找他,这可真是位贴心的朋友啦。所以,大多数事件绑定都仅仅只是传递给事件一个函数指针也就是函数名。

这时又有一个问题,之前说明的都是无参函数,如果是像代码示例中的fun2这种有参函数怎么办呢?难道只能用DOM0的方式一那种方法么?当然是否定的,尽量不要使用DOM0方式一那种形式,不符合结构与行为分离的原则。一般这种情况下就是使用匿名函数解决了,如下代码所示。如果大家有什么好的建议也可以留言分享一下~

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

以上就是我的总结,如有错误还要请大家多多指正,谢谢!感谢一起学习的小伙伴陈童鞋,正是因为他提的问题才让我注意到了这个经常被忽略的细节。

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

Javascript 相关文章推荐
Exitjs获取DataView中图片文件名
Nov 26 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
微信小程序canvas分享海报功能
Oct 31 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 #Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 #Javascript
使用JavaScript获取URL中的参数(两种方法)
Nov 16 #Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 #Javascript
微信小程序 获取相册照片实例详解
Nov 16 #Javascript
js canvas仿支付宝芝麻信用分仪表盘
Nov 16 #Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 #Javascript
You might like
php文件操作实例代码
2012/05/10 PHP
PHP基本语法总结
2014/09/06 PHP
php自定义分页类完整实例
2015/12/25 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
angular4自定义组件详解
2017/09/28 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
使用React手写一个对话框或模态框的方法示例
2019/04/25 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
浅析Python数据处理
2018/05/02 Python
python用post访问restful服务接口的方法
2018/12/07 Python
浅谈python3中input输入的使用
2019/08/02 Python
Django更新models数据库结构步骤
2020/04/01 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
学生会部长竞聘书
2014/03/31 职场文书
教师一岗双责责任书
2014/04/16 职场文书
先进事迹演讲稿
2014/09/01 职场文书
党员检讨书
2014/10/13 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
浅谈如何保证Mysql主从一致
2022/03/13 MySQL