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

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

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

<div id="box" onClick="alert('HELLO WORLD')">
  <div id="box2" onClick="notice();"></div>
  <div id="box3" onClick="service('HELLO WORLD'');"></div>
</div>

function notice(){ alert(HELLO WORLD'");} 
function service(str){ alert(str);} 

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

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

优点：

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

缺点如下：

 1）复用性不好。

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

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

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

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

 

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

var box = document.getElementById("box");

box.onclick = function(){
    alert("HELLOW WORLD");
};

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

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

box.onclick = function(){
        fnA();
        fnB();
};
function fnA(){
      alert("我会被执行");
} 
function fnB(){
    alert("我也会被执行");
}

说明：这种情况下 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) //删除事件