js实现事件监听与阻止监听传播

监听事件：

使用attachEvent（用于IE）和addEventListener（用于谷歌、火狐）时则可以实现多个事件处理函数的调用

1.下面都是dom对象的方法，可以实现一种事件绑定多个事件处理函数

方法一

obj = document.getElementById("testdiv");
obj.onclick=function(){alert('1');};
obj.onclick=function(){alert('2');};
obj.onclick=function(){alert('3');};
// 当使用上边三句话进行事件绑定的时候，很明显当点击ID为testdiv对象时，只能执行//最后一句脚本。因为onclick作为一个事件处理对象，只能赋一个值，后面的赋值自动覆//盖前面的

方法二：

obj = document.getElementById("testdiv");
obj.attachEvent('onclick',function(){{alert('1');});
obj.attachEvent('onclick',function(){{alert('2');});
obj.attachEvent('onclick',function(){{alert('3');});//点击时，三个方法都会执行

obj = document.getElementById("testdiv");
obj.addEventListener('click',function(){{alert('1');},false);
obj.addEventListener('click',function(){{alert(2');},false);
obj.addEventListener('click',function(){{alert('3');},false);//点击时，三个方法都会执行

 注意：.绑定时间时，attachEvent必须带on，如onclick，onmouseover等，而addEventListener不能带on，如click，mouseover。这个区别在以上代码中可见。

2.attachEvent仅需要传递两个参数，而addEventListener需要传递三个参数，这里牵扯到“事件流”的概念。侦听器在侦听时有三个阶段：捕获阶段、目标阶段和冒泡阶段。顺序为：捕获阶段（根节点到子节点检查是否调用了监听函数）→目 标阶段（目标本身）→冒泡阶段（目标本身到根节点）。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段

兼容性写法;

function addEvent(obj,ev,fn){
　　if (obj.addEventListener) {
　　　　obj.addEventListener(ev,fn,false);
　　　　// obj.addEventListener('click',function(){},false);//写法
　　}else{
　　　　obj.atteachEvent('on'+ev,fn);
　　　　// obj.atteachEvent('onclick',function(){});
　　}
}

用法：

var addEvent = (function () {
if (document.addEventListener) {
return function (el, type, fn) {
if (el.length) {
for (var i = 0; i && el.length; i++) {
addEvent(el[i], type, fn);
}
} else {
el.addEventListener(type, fn, false);
}
};
} else {
return function (el, type, fn) {
if (el.length) {
for (var i = 0; i && el.length; i++) {
addEvent(el[i], type, fn);
}
} else {
el.attachEvent('on' + type, function () {
return fn.call(el, window.event);
});
}
};
}
})();

阻止事件监听：

stopPropagation：该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。

cancelBubble：IE阻止事件冒泡

document.getElementById('boximg').onmouseover = function(ev){
　　event = ev || window.event;
　　// relatedTarget获取鼠标源
　　var frm = event.relatedTarget || event.fromElement;//判断鼠标来自那个元素
　　if (event.stopPropagation) {//
　　　　event.stopPropagation();
　　}else{
　　　　event.cancelBubble = true;//IE阻止事件冒泡
　　}
}

总结：

1、解除相应的监听绑定 btn5.removeEventListener("click",hello2);

2、

封装事件监听

//绑定监听事件

function addEventHandler(target,type,fn){

　　if(target.addEventListener){

　　　　target.addEventListener(type,fn);

　　}else{

　　　　target.attachEvent("on"+type,fn);

　　}

}

//移除监听事件

function removeEventHandler(target,type,fn){

　　if(target.removeEventListener){

　　　　target.removeEventListener(type,fn);

　　}else{

　　　　target.detachEvent("on"+type,fn);

　　}

}

涉及知识点有：