您的位置：首页 > Web前端 > JavaScript

js中addEventListener和attachEvent的用法（转）

2012-12-06 21:23 459 查看

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" onclick="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.onload=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

-----------------------------------------------------

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航