js监听器

http://tools.jb51.net/table/javascript_event

http://www.jb51.net/article/67051.htm

当同一个对象使用.onclick的写法触发多个方法的时候，后一个方法会把前一个方法覆盖掉，也就是说，在对象的onclick事件发生时，只会执行最后绑定的方法。而用事件监听则不会有覆盖的现象，每个绑定的事件都会被执行。如下：

window.onload = function(){ 
 var btn = document.getElementById("yuanEvent"); 
 btn.onclick = function(){ 
  alert("第一个事件"); 
 } 
 btn.onclick = function(){ 
  alert("第二个事件"); 
 } 
 btn.onclick = function(){ 
  alert("第三个事件"); 
 } 
}

最后只输出：第三个事件，因为后一个方法都把前一个方法覆盖掉了。

原生态的事件绑定函数addEventListener：

var eventOne = function(){ 
 alert("第一个监听事件"); 
} 
function eventTwo(){ 
 alert("第二个监听事件"); 
} 
window.onload = function(){ 
 var btn = document.getElementById("yuanEvent"); 
 //addEventListener：绑定函数 
 btn.addEventListener("click",eventOne); 
 btn.addEventListener("click",eventTwo); 

输出：第一个监听事件 和 第二个监听事件

解除绑定事件

2、采用事件监听给对象绑定方法后，可以解除相应的绑定，写法如下：

var eventOne = function(){ 
 alert("第一个监听事件"); 
} 
function eventTwo(){ 
 alert("第二个监听事件"); 
} 
window.onload = function(){ 
 var btn = document.getElementById("yuanEvent"); 
 btn.addEventListener("click",eventOne); 
 btn.addEventListener("click",eventTwo); 
 btn.removeEventListener("click",eventOne); 
}

输出：第二个监听事件

IE专用

在IE浏览器中我们可以使用attachEvent和detachEvent方法分别用以添加和注销事件(IE专用)

形如：object.attachEvent(event,function);//添加事件

      object.detachEvent(event,function);//注销事件

这里需要注意的是event的格式都是on+事件名，如：click事件->onclick

如果我们想为一个对象的某个事件指定多个事件处理，可以考虑使用事件监听。

事件监听语法：

IE： attachEvent(type,callback) type：事件名 如：onclick、onsubmit、onchange等
callback：事件处理程序

基于W3C模型： addEventListener(type,callback,capture) Type：事件名 ，没有“on”前缀
如：click、submit、change Callback：事件处理程序 Capture：事件模型 （可选参数）
（冒泡模型、捕捉模型） true：捕捉模型 false：冒泡模型 （默认值）

总结：

IE和W3C事件监听的不同：

监听方法不同：IE attachEvent 、W3C addEventListener
监听参数不同：IE 没有模型参数、W3C 有模型参数
触发顺序：IE 8及以下的浏览器触发时是先绑定、后触发
W3C浏览器是先绑定、先触发
事件名称不同：IE 事件需要”on”前缀，W3C不需要’on’前缀

解决浏览器兼容性

/**
 * [addEvent description]
 * @param {[type]}   obj      對象   监听对象
 * @param {[type]}   type     类型 click 这类 
 * @param {Function} callback [description]   回调函数
 */
function addEvent(obj,type,callback){
    if(window.attachEvent){     //IE
        obj.attachEvent('on'+type,callback);
    }else{                     //w3c
        obj.addEventListener(type,callback);
    }
}