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

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

  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中关于事件处理函数名后面是否带括号的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js函数后面括号
javascript 中括号、javascript 大括号、javascript 括号、javascript 小括号、javascript 方括号,以便于您获取更多的相关知识。

时间: 2024-09-10 22:17:21

JS中关于事件处理函数名后面是否带括号的问题_javascript技巧的相关文章

基于js里调用函数时,函数名带括号和不带括号的区别_javascript技巧

示例代码: <span style="font-size:18px;">function hi(){ var a = 1; return function(){ console.log(a++); }; }; var aaa = hi(); var bbb = hi; </span> 如以上代码: aaa 是将 hi() 的运行结果赋值给它,即 return 返回的匿名函数,此时有一个闭包,则每次调用 aaa 时都访问的同一个 a,aaa() 第一次运行结果为

浅谈js中几种实用的跨域方法原理详解_javascript技巧

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对http://store.company.com/dir/page.html同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 一.通过jsonp跨域 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不同

在JS中a标签加入单击事件屏蔽href跳转页面_javascript技巧

我们常用的在a标签中有点击事件: 1. a href="JavaScript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放.W3C标准不推荐在href里面执行javascript语句 2. a href="javascript:void(0);"

JS中call/apply、arguments、undefined/null方法详解_javascript技巧

a.call和apply方法详解 -------------------------------------------------------------------------------- call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指

js中使用使用原型(prototype)定义方法的好处详解_javascript技巧

经常在前端面试或是和其他同行沟通是,在谈到构造在JS定义构造函数的方法是最好使用原型的方式:将方法定义到构造方法的prototype上,这样的好处是,通过该构造函数生成的实例所拥有的方法都是指向一个函数的索引,这样可以节省内存. 当然,这种说法没有任何问题,只是在实现上,并非只有使用prototype的方式才能达到这样的效果,我们可以将方法以函数的形式定义在构造函数之外,然后在构造函数中通过this.method = method的方式,这样生成的实例的方法也都通过索引指向一个函数,具体如下:

JS中改变this指向的方法(call和apply、bind)_javascript技巧

this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化.但是总有一个原则,那就是this指的是调用函数的那个对象. this一般指向的是当前被调用者,但也可以通过其它方式来改变它的指向,下面将介绍三种方式: 1.call用作继承时: function Parent(age){ this.name=['mike','jack','smith']; this.age=age; } function Child(age){ Parent.call(this,age);

JS中如何比较两个Json对象是否相等实例代码_javascript技巧

在js前端面试过程中,经常会遇到这样的笔试题:JS中如何比较两个Json对象是否相等实例代码,下面小编抽点时间给大家整理下,一起看看吧. 1.先准备三个工具方法,用于判断是否是对象类型,是否是数组,获取对象长度 function isObj(object) { return object && typeof (object) == 'object' && Object.prototype.toString.call(object).toLowerCase() == &quo

在js中判断checkboxlist(.net控件客户端id)是否有选中_javascript技巧

在提交添加或修改内容时,需要对关键数据进行判空处理,如何在js中判断checkboxlist是否有选择项呢? 具体操作如下: 复制代码 代码如下: var CheckBox = document.getElementById("<%=cblWeek.ClientID %>").getElementsByTagName("INPUT"); if (CheckBox != undefined) { var i = 0; var j = 0; for (i =

js中string转int把String类型转化成int类型_javascript技巧

今天做项目的时候,碰到一个问题,需要把String类型的变量转化成int类型的.按照常规,我写了var i = Integer.parseInt("112");但控制台报错,说是"'Integer' 未定义".后来,才知道,原来js中String转int和Java中不一样,不能直接把Java中的用到js中.改成var j = parseInt("11");就ok了. 备注:无论是 Java 还是 JavaScript, parseInt 方法都有