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字符串拼接的效率问题
Dec 25 Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
Jan 14 Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
JS实现秒杀倒计时特效
Jan 02 Javascript
vue实现页面切换滑动效果
Jun 29 Javascript
详解Vue的sync修饰符
May 15 Vue.js
微信小程序 时间格式化(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
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
php 设计模式之 单例模式
2008/12/19 PHP
PHP 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
微信小程序实现图片上传
2019/05/23 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
python统计文本文件内单词数量的方法
2015/05/30 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
浅析Python四种数据类型
2018/09/26 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
有多年工作经验的自我评价
2014/03/02 职场文书
如何写股份合作协议书
2014/09/11 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
公司环境卫生管理制度
2015/08/05 职场文书