首页 > 代码库 > JS的事件监听机制
JS的事件监听机制
很久以前有个叫Netscape的姑娘，她制订了Javascript的一套事件驱动机制（即事件捕获）
后来又有一个叫“IE”的小子，这孩子比较傲气，他认为“凭什么我要依照你的规则走”，于是他又创造了一套自己的规则（事件冒泡）
再后来，有个叫W3C的媒婆，想撮合这两个孩子，将他们的特点融合在了一起，这下，事件产生的顺序变成：
事件从根节点开始，逐级派送到子节点，若节点绑定了事件动作，则执行动作，然后继续走，这个阶段称为“捕获阶段(Capture)”；
执行完捕获阶段后，事件由子节点往根节点派送，若节点绑定了事件动作，则执行动作，然后继续走，这个阶段称为“冒泡阶段(Bubble)”。
善良的Netscape以及其姐妹们都接受了媒婆的建议，采用了新的事件规则，而骄傲固执的IE小子始终按照自己的规则执行。最终使得这成为困扰前端开发人员的兼容性问题之一。那么，怎么绑定事件呢？
由于这两派浏览器的差异，其绑定的方法也不一样，其中，遵循标准的浏览器使用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，指捕获阶段。不过一般我们都用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个就可以了，它的时间处理机制就是冒泡不用额外设置。
最后要说说这段函数。
document.getElementById(‘status_show‘).addEventListener(‘click‘, stopEvent, false);
可以确定它的作用是防止前面提到的冒泡，引发不该引发的click事件。
可是它呢function(event){e = event || window.event}
JS的事件监听机制