随手笔记javascript篇_事件机制

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来阻止事件下流（具体看上面）。