手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆

addEventListener attachEvent用法

首页 > Javascript >

半夜看书的时候,莫莫问我如何bind事件,我告诉他jquery直接bind就可以了。但莫莫告诉我说,是直接用原生代码。由于没有接触过,只能问google了。

查下来,几乎所有的文章都是大同小异。看来在国内ctrl+C,ctrl+v是蔚然成风(当然,我也经常这么做,给大家带来的不便,实在抱歉)

顺手看到一篇英文的介绍,发现挺不错。原文地址为:http://www.captain.at/howto-addeventlistener-attachevent-parameters.php

国内的文章都着重于介绍怎么绑定。如何绑定多个,但,对于绑定的元素本身的事件却没有介绍。比如我绑定在ID为xxx的元素上的click事件怎么办。

例子都是用alert来举例,比如:

JavaScript代码
  1. function test()  
  2. {  
  3.     alert('test');  
  4. }  
  5. document.getElementById('xx').addEventListener('click',test,false);  
几乎都是这样的例子,就是没有一篇文章介绍,如果test方法有参数怎么办。

那篇英文的就介绍的很详细。

假设绑定事件为:

JavaScript代码
  1. if(window.addEventListener){ // Mozilla, Netscape, Firefox  
  2.     object.addEventListener('mouseover', testevent, false);  
  3.     object.addEventListener('click', testevent, false);  
  4.     object.myflag = "test";  
  5.     object.mydata = "123";  
  6. else { // IE  
  7.     object.attachEvent('onmouseover', testevent);  
  8.     object.attachEvent('onclick', testevent);  
  9.     object.myflag = "test";  
  10.     object.mydata = "123";  
  11. }  
触发的testevent如下:
JavaScript代码
  1. function testevent(evt){  
  2.     var e_out;  
  3.     var ie_var = "srcElement";  
  4.     var moz_var = "target";  
  5.     var prop_var = "myflag";  
  6.     // "target" for Mozilla, Netscape, Firefox et al. ; "srcElement" for IE  
  7.     evt[moz_var] ? e_out = evt[moz_var][prop_var] : e_out = evt[ie_var][prop_var];  
  8.     alert(e_out);  
  9.     prop_var = "mydata";  
  10.     evt[moz_var] ? e_out = evt[moz_var][prop_var] : e_out = evt[ie_var][prop_var];  
  11.     alert(e_out);  
  12. }  
看这个例子就可以很明显的知道,第一个参数就是event,自身ID,就是event["target"]或者event["srcElement"](这个与IE和FF有关)。

而这个event["target"]其实就相当于document.getElementById("xxx"),剩下的操作就与原来一样了。

介绍的有点乱,大概意思就是这样

 




本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"易栈网-膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

« 上一篇 | 下一篇 »

2条记录访客评论

看得懂就行。主要也是自己做做笔记。。。

Post by gouki on 2009, May 23, 7:51 PM 引用此文发表评论 #1

我比较同意这句话  “介绍的有点乱”

Post by roln on 2009, May 23, 6:00 PM 引用此文发表评论 #2


发表评论

评论内容 (必填):