JS事件监听的添加方法

一、
我们一般在的事件添加时是这样做的：
elm.onclick = function( ) { //handler } 这样的写法兼容主流的浏览器，但是存在一个问题，当同一个elm绑定多个事件时，只有最后一个事件会被添加
如：elm.onclick = handler1;
elm.onclick = handler2;
elm.onclick = hander3;
只有handler3会被添加执行，所以我们使用另外一种方法添加事件；

二、
IE：attachEvent
elm.attachEvent("onclick",handler1);
elm.attachEvent("onclick",handler2);
elm.attachEvent("onclick",handler3);
三个方法执行的顺序是3 - 2 -1；
标准:addEventListener( ):
elm.addEventListener( "click",handler1,false );
elm.addEventListener( "click",handler2,false );
elm.addEventListener( "click",handler3,false );
执行的顺序：1 - 2 - 3
该方法的第三个参数是泡沫获取，是一个布尔值：当为false时表示由里向外，true表示由外向里:

<div id=

"id1"

>

<div id=

"id2"

></div>

</div>

document.getElementById(

'id1'

).addEventListener(

'click'

,

function

() { console.log(

'id1'

);},

false

);

document.getElementById(

'id2'

).addEventListener(

'click'

,

function

() { console.log(

'id2'

);},

false

);

// 点击div2 div2 - div1

document.getElementById(

'id1'

).addEventListener(

'click'

,

function

() { console.log(

'id1'

);},

false

);

document.getElementById(

'id2'

).addEventListener(

'click'

,

function

() { console.log(

'id2'

);},

true

);

// 点击div2 div1 - div2

三、

DOM方法 addEventListener() 和 removeEventListener()是用来分配和删除事件的函数。 这两个方法都需要三个参数，分别为：

事件名称（String）、要触发的事件处理函数(Function)、指定事件处理函数的时期或阶段(boolean)。

DOM事件流如图（剪自javascript高级程序设计）：



由图可知捕获过程要先于冒泡过程


当第三个参数设置为true就在捕获过程中执行，反之就在冒泡过程中执行处理函数。

四、通用的事件添加方法：
1、
on:function(elm,type,handler)
{
// 添加事件
return elm.attachEvent ? elm.attachEvent("on"+type,handler) : elm.addEventListener(type,handler,false);
}