js基础——事件绑定（事件监听）

Posted 2020-09-27 web_study

javascript事件一共有三种监听方法分别如下：

1、事件监听一夹杂在html标签内

1 <div id="box" onClick="alert(‘HELLO WORLD‘)">
2   <div id="box2" onClick="notice();"></div>
3   <div id="box3" onClick="service(‘HELLO WORLD‘‘);"></div>
4 </div>
5 
6 function notice(){ alert(HELLO WORLD‘");} 
7 function service(str){ alert(str);} 

说明：以上把事件监听功能onClick写到div中的形式是最古老原始形式，所有主流浏览器都支持。

类似行内CSS样式一样，是有效的(注意大小敏感),但是缺点和写到行内的CSS样式一样。

优点：

1）兼容性好，基本上所有浏览器都支持该种方式

缺点如下：

 1）复用性不好。

 2）JS与HTML夹杂到一块，代码混乱，发生错误难以检测和排除，不利于分工合作。

 3）如果发生修改需要同时修改HTML和JS，改动相对困难。

为了解决以上问题把事件监听形式改进如下，以下方式也是目前主流的使用方式之一。

2、事件监听方法二 on+"事件"

1 <div id="box"></div>
2 
3 var box = document.getElementById("box");
4 
5 box.onclick = function(){
6     alert("HELLOW WORLD");
7 };

说明：通过以上形式可以把事件与html完全分离，是最常用的形式之一。

以上对于一般项目已经足够用。但如果想单击一次执行多个函数时，这种绑定方式就无法完成了：

 1 box.onclick = function(){
 2         fnA();
 3         fnB();
 4 };
 5 function fnA(){
 6       alert("我会被执行");
 7 } 
 8 function fnB(){
 9     alert("我也会被执行");
10 }

说明：这种情况下 alert("HELLOW WORLD") 就不会被执行了，也就是说后面的函数覆盖了之前声明的函数。

优点：

1）兼容性好，基本支持所有浏览器

2）做到了文档与JS的分离，方便后期的代码管理

缺点：

1）同一个事件，在执行多个函数时会发生覆盖

3、事件监听方法三 element.addEventListener（事件名，函数，冒泡/捕获）

<div id="box">
  <div id="box1"></div>
  <div id="box2"></div>
</div>

var box = document.getElementById("box");
box.addEventListener("click",fnA,false);
box.addEventListener("click",fnB,false);

function fnA(){
        alert("HELLO WORLD！");
}
function fnB(){
        alert("HI CHINA！");
}

上面两个函数fA(),fB()都会执行，不会发生覆盖现象。

使用介绍：

addEventListene是DOM2的标准语法，新版本主流浏览器基本都支持。但是老版本IE浏览器不支持；

这种绑定方法有三个参数：

第一个是事件类型，不需要on前缀，但事件名需加  " " ；
第二个参数是发生这个事件的时候要调用的函数；

第三个是布尔值的true或false.（默认值是false）
false代码是以冒泡型事件流进行处理，一般都选用false.
true意味着代码以捕获型事件流进行处理，不是必须不推荐使用。

优点：

1）做到JS与HTML文档分离，便于代码维护；

2）不会发生向on+"事件"的函数覆盖现象；

3）提供监听的事件以冒泡或者捕获的可选方式执行

缺点：

1）兼容性还不完善，老板IE浏览器好不支持；

2）方法名较长，记忆稍有难度

注：使用element.removeEventListener(type,listener,useCapture);方法可以移除已经添加的实际。
        使用方法：box.removeEventListener("click",fnB,false);  

4、IE浏览器的特性型：

老版本IE浏览器有自己的方法 attachEvent和detachEvent.
语法格式如下：
element.attachEvent("onclick",listenerFunction) //添加事件
element.detachEvent("onclick",listenerFunction) //删除事件