半夜看书的时候,莫莫问我如何bind事件,我告诉他jquery直接bind就可以了。但莫莫告诉我说,是直接用原生代码。由于没有接触过,只能问google了。
查下来,几乎所有的文章都是大同小异。看来在国内ctrl+C,ctrl+v是蔚然成风(当然,我也经常这么做,给大家带来的不便,实在抱歉)
顺手看到一篇英文的介绍,发现挺不错。原文地址为:http://www.captain.at/howto-addeventlistener-attachevent-parameters.php
国内的文章都着重于介绍怎么绑定。如何绑定多个,但,对于绑定的元素本身的事件却没有介绍。比如我绑定在ID为xxx的元素上的click事件怎么办。
例子都是用alert来举例,比如:
JavaScript代码
- function test()
- {
- alert('test');
- }
- document.getElementById('xx').addEventListener('click',test,false);
那篇英文的就介绍的很详细。
假设绑定事件为:
JavaScript代码
- if(window.addEventListener){ // Mozilla, Netscape, Firefox
- object.addEventListener('mouseover', testevent, false);
- object.addEventListener('click', testevent, false);
- object.myflag = "test";
- object.mydata = "123";
- } else { // IE
- object.attachEvent('onmouseover', testevent);
- object.attachEvent('onclick', testevent);
- object.myflag = "test";
- object.mydata = "123";
- }
JavaScript代码
- function testevent(evt){
- var e_out;
- var ie_var = "srcElement";
- var moz_var = "target";
- var prop_var = "myflag";
- // "target" for Mozilla, Netscape, Firefox et al. ; "srcElement" for IE
- evt[moz_var] ? e_out = evt[moz_var][prop_var] : e_out = evt[ie_var][prop_var];
- alert(e_out);
- prop_var = "mydata";
- evt[moz_var] ? e_out = evt[moz_var][prop_var] : e_out = evt[ie_var][prop_var];
- alert(e_out);
- }
而这个event["target"]其实就相当于document.getElementById("xxx"),剩下的操作就与原来一样了。
介绍的有点乱,大概意思就是这样