javascript事件监听机制
捕获阶段:
事件从根节点开始,逐级派送到子节点,若节点绑定了事件动作,则执行动作,然后继续走(Firefox等浏览器)。
冒泡阶段:
执行完捕获阶段后,事件由子节点往根节点派送,若节点绑定了事件动作,则执行动作,然后继续走(IE浏览器)。
注意:然而在大多数浏览器使用同样标准时,IE却没有使用,因而造就了兼容问题。
事件注册机
if(window.addEventListener)
{
addListener=function(el,type,listener,useCapture){
el.addEventListener(type,listener,useCapture);
};
}
else if(window.attachEvent)
{
addListener=function(el,type,listener){
el.attachEvent(“on”+type,function(){listener.apply(el);})
}
}
注意:防止冒泡继续的函数(添加到要执行动作的结点中):
var stopEvent=function(event){
e=event||window.event;
if(e.stopPropagation)
{
e.stopPropagation();
}
else
{
e.cancelBubble=true;
}
};
W3C的 addEventListener函数
addEventListener(String eventFlag,functioneventFunc,bool useCapture)
eventFlag:事件名称,如click事件、mouseover事件等;
eventFunc:绑定到事件中的函数;
useCapture:是否在捕获阶段,默认为true(不过我们常用false);
注意:可用event.stopPropagation()来阻止事件下流(具体看上面)。
IE的attachEvent函数
attachEvent(string eventFlag,functioneventFunc)
eventFlag:事件名称,前面要加“on”,如onclick事件、onmousover事件等;
eventFunc:绑定到事件中的函数;
注意:可使用window.event.cancelBubble=false来阻止事件下流(具体看上面)。