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 相关文章推荐
FireFox JavaScript全局Event对象
Jun 14 Javascript
网络图片延迟加载实现代码 超越jquery控件
Mar 27 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 Javascript
Javascript this 的一些学习总结
Aug 31 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
使用node.js 获取客户端信息代码分享
Nov 26 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
Dec 19 Javascript
js简单实现自动生成表格功能示例
Jun 02 Javascript
Vue中keep-alive组件的深入理解
Aug 23 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 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
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
Jquery 常用方法经典总结
2010/01/28 Javascript
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
2016/05/16 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
Python list操作用法总结
2015/11/10 Python
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
在Django中实现添加user到group并查看
2019/11/18 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
先进事迹报告会感言
2014/01/24 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
辅导员评语
2014/05/04 职场文书
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS