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