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 相关文章推荐
Javascript 继承实现例子
Aug 12 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
Dec 08 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
JavaScript设置名字输入不合法的实现方法
May 23 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
详解原生JS动态添加和删除类
Mar 26 Javascript
vue.js 实现a标签href里添加参数
Nov 12 Javascript
Preload基础使用方法详解
Feb 03 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 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 5.3.5安装memcache注意事项小结
2011/04/12 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
php不写闭合标签的好处
2014/03/04 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
详解PHP素材图片上传、下载功能
2019/04/12 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
拖拉表格的JS函数
2008/11/20 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
Python获取央视节目单的实现代码
2015/07/25 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
用Python开发app后端有优势吗
2020/06/29 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
教师节大会主持词
2015/07/06 职场文书