奋斗30天Javascript之addEventListener() 方法（part26）

addEventListener() 方法

[code]obj.addEventListener(type,fn,false){}

这个函数中的

this

指向当前的DOM元素

定义和用法

addEventListener() 方法用于向指定元素添加事件句柄。

提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

注意： Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，，Opera 7.0 及 Opera 更早版本也不支持。 但是，对于这些不支持该函数的浏览器，你可以使用 attachEvent() 方法来添加事件句柄 (查看 "更多实例" 了解跨浏览器的解决方案)。

语法

[code]element.addEventListener(event, function, useCapture)

参数值

如果浏览器不支持 addEventListener() 方法, 你可以使用 attachEvent() 方法替代。

[code]if (document.addEventListener) {                //所有主流浏览器，除了 IE 8 及更早 IE版本
document.addEventListener("click", myFunction);
} else if (document.attachEvent) {             // IE 8 及更早 IE 版本
document.attachEvent("onclick", myFunction);
}

 栗子一：為每個li綁定一個事件，分別輸出每個li當前的索引值。

[code] <ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var liNum = document.getElementsByTagName('li');
for(let i =0;i<liNum.length;i++){
liNum[i].addEventListener('click',function(){
alert(i);
},false)
}
</script>

注意：必須要使用let這是個塊級作用域。

我點擊了1，然後彈出索引值0.

removeEventListener() 方法

定义和用法

removeEventListener() 方法用于移除由 addEventListener() 方法添加的事件句柄。

注意： 如果要移除事件句柄，addEventListener() 的执行函数必须使用外部函数，如上实例所示 (myFunction)。

匿名函数，类似 "document.removeEventListener("event", function(){ myScript });" 该事件是无法移除的。

[code]// 向 <div> 元素添加事件句柄
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

// 移除 <div> 元素的事件句柄
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

注意: Internet Explorer 8 及更早IE版本不支持 removeEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。 但是，对于这些不支持该函数的浏览器，你可以使用 detachEvent() 方法来移除由 attachEvent() 方法添加的事件句柄 (查看 "更多实例" 了解跨浏览器的解决方案)。

语法

[code]element.removeEventListener(event, function, useCapture)

参数值

 兼容性問題：

[code]var x = document.getElementById("myDIV");
if (x.removeEventListener) {                   // // 所有浏览器，除了 IE 8 及更早IE版本
x.removeEventListener("mousemove", myFunction);
} else if (x.detachEvent) {                   // IE 8 及更早IE版本
x.detachEvent("onmousemove", myFunction);
}