addEventListener 和attachEvent用法

对于IE的attachEvent方法可能大家都比较熟，现在说说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

评论

3 楼 moxia 2013-09-30  

softor 写道

这是我格式化的代码：

<div id="div_test"> <input type="button" id="btn_test" value="按钮" /> </div>

<script type="text/javascript">
<!--
window.onload = function() {
	document.getElementById("div_test").attachEvent("onclick", test1, false);
	document.getElementById("btn_test").attachEvent("onclick", test2, false);
}
function test1() {
	alert("外层div触发")
}
function test2() {
	alert("内层input触发")
}
//-->
</script>

人家举的是addEventListener的例子，你怎么改成attachEvent...

<div id="div_test"><input type="button" id="btn_test" value="按钮" /></div>

<script type="text/javascript">
<!--
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触发")
}
//-->
</script>

2 楼 softor 2012-08-15  

这是我格式化的代码：

<div id="div_test"> <input type="button" id="btn_test" value="按钮" /> </div>

<script type="text/javascript">
<!--
window.onload = function() {
	document.getElementById("div_test").attachEvent("onclick", test1, false);
	document.getElementById("btn_test").attachEvent("onclick", test2, false);
}
function test1() {
	alert("外层div触发")
}
function test2() {
	alert("内层input触发")
}
//-->
</script>

1 楼 softor 2012-08-15  

你第一段实例里有连个事件监听，你说的“如果userCapture”指的是哪个userCapture？

这例子怎么提现冒泡和捕获的？求教？