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

JavaScript事件一共有三种监听方法分别以下：

一、事件监听一夹杂在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，改动相对困难。

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

二、事件监听方法二 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）同一个事件，在执行多个函数时会发生覆盖

三、事件监听方法三 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);  

四、IE浏览器的特性型：

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