addEventListener('click',fnName,false) 兼容性問題
addEventListener('click',fnName,false); ?老師你不是說這個函數的第三個參數為false代表是將時間處理程序添加到冒泡階段，兼容各種瀏覽器么？？？卻不支持IE？
2 回答
舉報
0/150
提交
取消
addEventListener('click',fnName,false); ?老師你不是說這個函數的第三個參數為false代表是將時間處理程序添加到冒泡階段，兼容各種瀏覽器么？？？卻不支持IE？
2016-08-23
舉報
2016-08-23
不不不，你認知錯了……addEventListener('click',fnName,false)是用的Dom2級事件，他只能支持各種瀏覽器（不包括IE全系列。）并不支持IE和node？系列。往后看就知道了，IE有IE專門處理各種屬性的方法。需要方法判斷下，才能全兼容的?？梢钥聪乱曨l2-4，答案就在里面
2016-08-23
事件流分為事件冒泡流和事件捕獲流。其中事件捕獲流是由natScape瀏覽器獨自開發的一種事件流結構，后來也被火狐、chrome、IE9及以上等主流瀏覽器支持。而支持事件冒泡流結構的瀏覽器則涵蓋了當下基本所有的瀏覽器，包括IE8及以前版本。
給某個Dom對象(比如某個按鈕等)添加事件處理程序的方法主要分為三種：HTML事件處理程序、Dom0級事件處理程序和Dom2級處理程序。各個版本的瀏覽器對這三種寫法的支持程度是不同的。其中Dom0級事件處理程序被支持度最為廣泛，涵蓋了IE系列瀏覽器。
這三種方法的主要寫法和示例如下(以點擊事件為例)：
HTML事件處理程序
首先body中的Dom對象中直接添加onclick方法
<input type="button" id="btn1" onclick="showMessage()">
然后再js文件或者js代碼段內添加事件處理程序定義
function showMessage(){
? ? alert("hello world");
}
Dom0級事件處理程序
假設要給btn2按鈕添加點擊事件處理程序
<input type="button" id="btn2">
在js代碼區添加事件處理程序和綁定關系
var btn2 = document.getElementById("btn2");
btn2.onclick = function showMessage(){
? ? alert("hello world");
}
如果要移除該點擊事件處理程序
btn2.onclick = null;
Dom2級事件處理程序
body中的按鈕對象為btn3
<input type="button" id="btn3">
js區添加事件處理程序和綁定關系
function showMessage(){
? ? alert("hello world");
}
(1)在IE8及以下中的寫法, IE9、IE10也支持，IE11不再支持
var btn3 = document.getElementById("btn3");
btn3.attachEvent("onclick", showMessage)；
btn3.detachEvent("onclick", showMessage);
(2)在Chrome瀏覽器中的寫法，IE9及以上版本也支持
????????btn3.addEventListener("click", showMessage, false);
????????btn3.removeEventListener("click", showMessage, false);
????????注意這里的第一個參數和IE8瀏覽器第一參數的區別，方式1中為“onclick”, 方式2中為“click”。方式2中需要將我們平常習慣的事件處理方法名前面的 'on'去掉。
????????方式2中的第三個參數，true標示事件捕獲流，false標示事件冒泡流。