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

2019-11-20 11:30:14

字体：大中小

来源：转载

供稿：网友

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

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

<table><tr onmouseover='this.style.backgroundColor="red"' onmouseout='this.style.backgroundColor=""'><td>text1</td><td>text2</td></tr><tr onmouseover='this.style.backgroundColor="red"' onmouseout='this.style.backgroundColor=""'><td>text3</td><td>text4</td></tr><tr onmouseover='this.style.backgroundColor="red"' onmouseout='this.style.backgroundColor=""'><td>text5</td><td>text5</td></tr></table>

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

<table><tr><td>text1</td><td>text2</td></tr><tr><td>text3</td><td>text4</td></tr><tr><td>text5</td><td>text5</td></tr></table><script>doms = document.getElementsByTagName('tr');for(i=0;i<doms.length;i++){  doms[i].onmouseover = function()  {    this.style.backgroundColor = "red";  }  doms[i].onmouseout = function()  {    this.style.backgroundColor = "";  }}</script>

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

<table><tr><td>text1</td><td>text2</td></tr><tr><td>text3</td><td>text4</td></tr><tr><td>text5</td><td>text5</td></tr></table><script>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;i<doms.length;i++){  try  {    doms[i].addEventListener('mouseover',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',for_ie(doms[i],hide_color));  }}</script>

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

上一篇：JavaScript 对象深入学习总结(经典)

下一篇：jQuery中的ajax async同步和异步详解