addEventListener是js填加事件;用法如下:
target.addEventListener(type,listener,useCapture)
target: 文档节点、document、window 或 XMLHttpRequest。
type:
字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。
listener :实现了
EventListener 接口或者是 JavaScript 中的函数。也就是function之类的。
useCapture :是否使用捕捉,一般用 false
。
例如:document.getElementById("testText").addEventListener("keydown", function
(event) { alert(event.keyCode); }, false);
主要理解下第三个参数 useCapture;如果为true则是capture捕获事件,如果是false则是budding冒泡事件,(关于冒泡事件和捕获事件可以参考文章:http://www.cnblogs.com/MissBean/p/4256235.html)
看个例子感受下:
<div id="div_test">
<input type="button" id="btn_test" value="测测" />
</div>
1 <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>
第三行和第四行都是false。所以是冒泡事件,会先触发子级事件也就是test2,再触发父级,也就是test1.
如果将三四行的false改成true,则是捕获事件,会先触发父级事件再触发子级事件;
但是如果一个是false一个是true呢?此时要看最父级是true还是false,最父级是true则捕获,false则冒泡;此例中,div_test是父级,所以看第三行是true还是false,决定是捕获还是冒泡。
IE中,因为之前IE版本默认都是冒泡事件,所以用target.attachEvent(type, listener); 两个参数即可;
target: 文档节点、document、window 或 XMLHttpRequest。
type:
字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。
listener :实现了
EventListener 接口或者是 JavaScript 中的函数。
例如:document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});
想要让它兼容所有浏览器,可以做一个判断
<div class="box">
<input type="button" value="按钮1" id="btn1" onclick="showE();" />
<input type="button" value="按钮2" id="btn2" />
<input type="button" value="按钮3" id="btn3" />
</div>
function showE(){
console.log(1111);
}
var eventUntil={
addHandler:function (element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,handler)
}else{
element['on'+type]=handler;
}
},
removeHandler:function (element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.attachEvent('on'+type,handler)
}else{
element['on'+type]=null;
}
}
}
eventUntil.addHandler(obtn3,"click",showE)
上面6-12行是做判断,这样就兼容了所有浏览器