JS的事件监听机制

概述很久以前有个叫Netscape的姑娘，她制订了Javascript的一套事件驱动机制（即事件捕获）后来又有一个叫“IE”的小子，这孩子比较傲气，他认为“凭什么我要依照你的规则走”，于是他又创造了一套自己的规则（事件冒泡）再后来，有个叫W3C的媒婆，想撮合这两个孩子，将他们的特点融合在了一起，这下，事

很久之前有个叫netscape的姑娘，她制定了JavaScript的1套事件驱动机制（即事件捕获）

后来又有1个叫“IE”的小子，这孩子比较傲气，他认为“凭甚么我要依照你的规则走”，因而他又创造了1套自己的规则（事件冒泡）

再后来，有个叫W3C的牙婆，想撮合这两个孩子，将他们的特点融会在了1起，这下，事件产生的顺序变成：

事件从根节点开始，逐级派送到子节点，若节点绑定了事件动作，则履行动作，然后继续走，这个阶段称为“捕获阶段(Capture)”；
履行完捕获阶段后，事件由子节点往根节点派送，若节点绑定了事件动作，则履行动作，然后继续走，这个阶段称为“冒泡阶段(Bubble)”。

仁慈的netscape和其姐妹们都接受了牙婆的建议，采取了新的事件规则，而自豪固执的IE小子始终依照自己的规则履行。终究使得这成为困扰前端开发人员的兼容性问题之1。那末，怎样绑定事件呢？

由于这两派阅读器的差异，其绑定的方法也不1样，其中，遵守标准的阅读器使用W3C定义的addEventListener函数绑定，函数定义以下：

function addEventListener(string eventFlag,function eventFunc,[bool useCapture=false])

eventFlag : 事件名称，如click、mouSEOver…
eventFunc: 绑定到事件中履行的动作
useCapture: 指定是不是绑定在捕获阶段，true为是，false为否，默许为true
在事件监听流中可使用event.stopPropagation()来禁止事件继续往下流

IE中使用自有的attachEvent函数绑定时间，函数定义以下：

function attachEvent(string eventFlag,function eventFunc)

eventFlag: 事件名称，但要加上on，如onclick、onmouSEOver…
eventFunc: 绑定到事件中履行的动作
在事件监听流中可使用window.event.cacenlBubble=false来禁止事件继续往下流

总结：addEventListener(string eventFlag,function eventFunc,[bool useCapture=false])，针对ff，Chrome，safari阅读器，false指冒泡阶段，默许为true，指捕获阶段。不过1般我们都用false。

attachEvent(string eventFlag,function eventFunc)，针对IE系列、还有opera阅读器，少了事件处理机制的参数，只指定事件类型（别忘了on）和触发哪一个函数。

有了这些认知以后，有了大致的思路，对应的代码：

if(document.addEventListener){document.addEventListener('click',hIDeBox,false);

在document绑定信息框（竖的那个）隐藏函数（即随意点HTML页面的哪里关闭展开的信息框，这也是使用document.addEventListener的缘由，要帮在文档上）

document.getElementByID('status_hIDe').addEventListener('click',showBox,false);

在status_hIDe节点绑定信息框展开(详细的那个)函数并停止事件流（即点击竖的这个，展开详细的那个）

document.getElementByID('status_show').addEventListener('click',stopEvent,false);

由于false肯定的是事件冒泡，为了避免点详情的时候，向上冒泡到document，触发document设置的click时hIDeBox方法，在status_show我们要绑定禁止事件流函数。

}

这个明白了，针对IE再写个attachEvent的就能够了，固然IE的参数只用2个就能够了，它的时间处理机制就是冒泡不用额外设置。

最后要说说这段函数。

var stopEvent = function(event){ e = event || window.event; if(e.stopPropagation){ e.stopPropagation(); }else { e.cancelBubble = true; } };

可以肯定它的作用是避免前面提到的冒泡，引发不该引发的click事件。

可是它呢function(event){e = event || window.event}

总结

以上是内存溢出为你收集整理的JS的事件监听机制全部内容，希望文章能够帮你解决JS的事件监听机制所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。