一在孝、事件event對象
- Event事件對象硕糊，用來獲取事件的詳細信息：鼠標位置、鍵盤按鍵冕碟。在主流瀏覽器下默認傳參給事件函數(shù)的第一個參數(shù)，ie低版本會掛載在window下的event屬性里匆浙，保存了觸發(fā)事件參數(shù)，這是個全局對象厕妖。
- Event對象的兼容：e = e || window.event;
obj.onclick = function(e){
e = e || window.event;
}
-
event.type返回事件的類型首尼。
- 取消事件的傳遞，主流瀏覽器下使用
e.stopPropagation();方法，IE瀏覽器下使用e.cancelBubble=true屬性软能。
二迎捺、DOM事件
- DOM 0級事件，
onclick被認為是元素的屬性方法查排，只能綁定一個凳枝。
- DOM 2級事件，主流瀏覽器下使用
addEventListener(事件名稱跋核，事件函數(shù)岖瑰，是否捕獲)注冊事件，第一個參數(shù)傳事件類型（click）砂代，第二個參數(shù)傳事件函數(shù)蹋订，第三個函數(shù)傳是否捕獲，true使用捕獲刻伊，默認false使用冒泡露戒。事件名稱沒有on，事件執(zhí)行的順序是正序捶箱，this指觸發(fā)該事件的對象智什。IE瀏覽器下使用attacheEvent(事件名稱，事件函數(shù))注冊事件丁屎，第一個參數(shù)傳事件類型（onclick）荠锭，第二個參數(shù)傳事件函數(shù)。沒有捕獲悦屏，事件名稱有on节沦，this指向window。
- DOM 2級事件础爬，主流瀏覽器下使用
removeEventListener(事件名稱甫贯，事件函數(shù)，是否捕獲)注銷事件看蚜，第一個參數(shù)傳事件類型（click）叫搁，第二個參數(shù)傳事件函數(shù)，第三個參數(shù)傳是否捕獲供炎，狀態(tài)要和注冊事件一一對應渴逻。IE瀏覽器使用detachEvent(事件名稱，事件函數(shù))注銷事件音诫。第一個參數(shù)傳事件類型（onclick）惨奕。
var oBox = document.getElementById('box');
var captrue = true; //捕獲
document.addEventListener('click', function(){
console.log('document點擊')
},captrue);
document.body.addEventListener('click', function(e){
e.stopPropagation(); //停止事件傳遞，下面的oBox點擊事件不會觸發(fā)
console.log('body點擊')
},captrue);
oBox.addEventListener('click',function(e) {
e.stopPropagation();
console.log('box點擊')
},captrue);
//IE瀏覽器下
var fn = function(e){
e = e || window.event;
//e.stopPropagation();
e.cancelBubble = true;
console.log('點擊box')
};
oBox.attachEvent('onclick',fn);
//oBox.addEventListener("click",fn);
var timer;
document.onclick = function(){
timer = setTimeout(function(){
console.log('單擊')
},300);
}
//文檔雙擊就會取消 oBox的點擊事件
document.ondblclick = function(){
console.log('雙擊');
clearTimeout(timer);
oBox.detachEvent('onclick',fn);
}
三竭钝、事件冒泡
- 事件冒泡指子元素觸發(fā)事件的時候梨撞，會 冒泡（觸發(fā)）父級的相同的事件 雹洗。
- 主流瀏覽器下使用
e.stopPopagation();，IE瀏覽器下使用e.cancelBubble=true;
四卧波、兼容事件注冊
evenetBind(box,'click',function(event){
console.log(event);
eventUnbind(this,'click',true);
},true);
/*
* 綁定事件
* ele 元素節(jié)點
* event 事件類型
* hadler 處理事件函數(shù)
* capture 是否捕獲
*/
function evenetBind(ele,eventType,handler,capture) {
//用包裝函數(shù)做處理
ele['evet'+eventType] = handler;
//先判斷是否為主流瀏覽器
if(ele.addEventListener){
ele.addEventListener(eventType,ele['evet'+eventType],capture);
}else if(ele.attachEvent){
//ie需要做處理
ele['evet'+eventType] = function(){
//處理低版本ie 的this指向問題
handler.call(ele,window.event);
};
ele.attachEvent('on'+eventType,ele['evet'+eventType]);
}else{
ele['on'+eventType] = handler;
}
}
//注銷事件
function eventUnbind(ele,event,capture){
//如果在就是主流瀏覽器
if(ele.removeEventListener){
ele.removeEventListener(event,ele['evet'+event],capture);
}else if(ele.detachEvent){
ele.detachEvent('on'+event,ele['evet'+event]);
}else{
ele['on'+event] = null;
}
}
