js事件处理函数加括号与不加括号的区别

js事件处理函数加括号与不加括号的区别

说明:addEventListenter为DOM2级事件绑定,onclick为DOM0级事件绑定

一.DOM0级事件

1.情况一:在标签中直接为onclick事件属性赋值事件处理函数

(1)不加括号不会执行,只有加括号,点击时候才会执行;

(2)例如:DOM和js代码如下:

<button id="btn" onclick="sayHello();">点我</button>

function sayHello(){
    alert('如果不加括号,这句话,就出不来了!')
}

(3) 这时候如果要实现点击时弹出一句话,就必须加括号,否则,DOM将不会有任何反应!

2.情况二:DOM0级事件,不直接为onclick属性赋值处理函数

(1)html代码如下

<div id="box" onclick="fun1();fun2();"></div>

(2)这样的话,两个事件处理函数都将被执行,顺序为出现的顺序

(3) 如果两个事件处理函数不在onclick属性中赋值,而是由js代码动态添加,那么,只有最后一个事件处理函数将被执行,也就是说DOM0级事件,最后的事件会覆盖前面添加的事件.

js代码如下

var box = document.getElementById('box');
box.onclick = fun1();
box.onclick = fun2();
function fun1(){alert('这是事件处理函数1')}
function fun2(){alert('这是事件处理函数2')}

---

二.DOM2级事件

1.情况一:事件处理函数不加括号–这是正常情况(必须点击之后)才会执行函数处理结果

具体代码

<button id="myBtn">点我</button>
            <p id="demo"></p>3.

// DOM2级事件绑定,添加事件监听器函数
document.getElementById("myBtn").addEventListener("click",displayDate);//函数名后面不带括号
// 事件处理函数
function displayDate(){                 document.getElementById("demo").innerHTML=Date();}

以上事件只有当button元素触发点击事件时候,才会执行!

2.情况二:事件监听器函数加括号–非正常情况(不必点击),页面一旦打开,就直接执行处理结果

具体代码

<button id="myBtn">点我</button>
<p id="demo"></p>

// DOM2级事件绑定,添加事件监听器函数
document.getElementById("myBtn").addEventListener("click",displayDate());//函数名带括号
// 事件处理函数
function displayDate(){                document.getElementById("demo").innerHTML=Date();
}

这种情况,页面一旦打开将会立即触发事件处理函数的执行,无论点击与否!

---

三.总结

要想实现点击之后才能看到效果
1.DOM0级事件:行内事件元素属性处理器函数必须带括号,不在行内写,绑定操作的话,最后一个覆盖前面的;
2.DOM2级事件:必须去掉括号,才能实现点击后看到效果,如果带上括号,页面一打开,效果就出现了