AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

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

51自学网 http://www.wanshiok.com
javascript事件监听,javascript监听,javascript监听对象,javascript,事件

事件(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事件监听,javascript监听,javascript监听对象,javascript,事件  
上一篇:JavaScript 对象深入学习总结(经典)  下一篇:jQuery中的ajax async同步和异步详解