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}
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。