![](http://www.byywee.com/images/Img_line.gif)
Admin
2012年5月6日名人名言:成功的第一个条件是真正的虚心,对自己的一切敝帚自珍的成见,只要看出同真理冲突,都愿意放弃。——斯宾塞
//js中addachEvent,addEventListener的应用办法 //非IE浏览器的动态添加,刊出事务的办法 el.addEventListener(""click"", msg, false);//添加 el.removeEventListener(""click"", msg, false);//刊出 //IE中动态添加事务的办法 el.attachEvent(""onclick"",msg);//添加 el.detachEvent(""onclick"",msg);//刊出 例: <body> <input id="123" type="text" id="test" value="点击" /> <input id="Button1" type="button" οnclick="ok()" value="删除动态添加的事务" /> <script> var el = document.getElementById("123"); //先取得对象 alert("el.addEventListener=="+el.addEventListener);//提示 alert("el.attachEvent=="+el.attachEvent); if (el.addEventListener) //用于 Mozilla系列 { el.addEventListener(""click"", msg, false); } else if (el.attachEvent) //非Mozilla系列(IE) { el.attachEvent(""onclick"", msg); } if (window.addEventListener) // { window.addEventListener(""load"",msg, false); } else if (window.attachEvent) { window.attachEvent(""onload"", msg); } function msg() { alert("我是动态添加的"); } function ok() { if (el.removeEventListener) //用于 Mozilla系列 { el.removeEventListener(""click"", msg, false); } else if (el.detachEvent) //IE中动态添加事务的办法 { el.detachEvent(""onclick"", msg); } } </script> </body>
FireFox的addEventListener的用法。
addEventListener的参数一共有三个,语法为:
element.addEventListener(type,listener,useCapture)
下面是详解
- 此中element是要绑定函数的对象。
- type是事务名称,要重视的是"onclick"要改为"click","onblur"要改为"blur",也就是说事务名不要带"on"。
- listener当然就是绑定的函数了,记住不要跟括号
- 最后一个参数是个布尔值,默示该事务的响应次序,下面重点介绍一下addEventListener的第3个参数(useCapture)。
userCapture若为true,则浏览器采取Capture,若为false则采取bubbing体式格式。建议用false,看个例子吧。
html代码
<div id="div_test"> <input type="button" id="btn_test" value="se4.cn技巧基地" /> </div>
js代码
window.οnlοad=function(){ document.getElementById("div_test").addEventListener("click",test1,false); document.getElementById("btn_test").addEventListener("click",test2,false); } function test1(){ alert("外层div触发") } function test2(){ alert("内层input触发") }
本身体验一下,若是userCapture是true则test1先触发,若是userCapture是false则test2先触发。
在迩来的工作中,用到了attachEvent办法,该办法可认为某一事务附加其它的处理惩罚事务,有时辰可能斗劲有效,这里将其根蒂根基用法总结一下。
其语法可以查看《DHTML手册》,里面有具体的申明,这里贴一个例子,该例子来自互联网:
document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;
若是如许写,那么将会只有medhot3被履行
写成如许:
var btn1Obj = document.getElementById("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
履行次序为method3->method2->method1
若是是Mozilla系列,并不支撑该办法,须要用到addEventListener
var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
履行次序为method1->method2->method3
-----------------------------------------------------