深入浅析JavaScript中对事件的三种监听方式

前端之家收集整理的这篇文章主要介绍了深入浅析JavaScript中对事件的三种监听方式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水,当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了。

第一种监听方式,也是最普遍使用的方式,是直接在代码上加载事件,产生效果

404_6@404_6@404_6@

第二种监听方式,是使用DOM的方式获取对象,并加载事件:

doms = document.getElementsByTagName('tr'); for(i=0;iSEOver = function() { this.style.backgroundColor = "red"; } doms[i].onmouSEOut = function() { this.style.backgroundColor = ""; } }

第三种监听方式,是使用标准的addEventListener方式和IE私有的attachEvent方式,因为IE的attachEvent方式在参数传递时的缺陷,这个问题被搞得稍许有些复杂了:

doms = document.getElementsByTagName('tr'); function show_color(where) { this.tagName ? where = this : null where.style.backgroundColor = "red"; } function hide_color(where) { this.tagName ? where = this : null where.style.backgroundColor = ""; } function for_ie(where,how) { return function() { how(where); } } for(i=0;iSEOver',show_color,false); doms[i].addEventListener('mouSEOut',hide_color,false); } catch(e) { doms[i].attachEvent('onmouSEOver',for_ie(doms[i],show_color)); doms[i].attachEvent('onmouSEOut',hide_color)); } }

在绑定多个相同的事件的时候,前两种方法会产生覆盖,而第三中方法则会同时执行多个事件。

猜你在找的JavaScript相关文章