事件流 事件冒泡: 即事件最開始由最具體的元素(文檔中嵌套層次最深的那個節點)接收,然後逐級向上傳播至最不具體的那個節點(文檔) 事件捕獲: 不太具體的節點應該更早接收到事件而最具體的節點最後接收到事件 IE——事件冒泡流 事件對象:在觸發DOM上的事件時都會產生一個對象 DOM中的事件對象 1. ...
事件流
事件冒泡:即事件最開始由最具體的元素(文檔中嵌套層次最深的那個節點)接收,然後逐級向上傳播至最不具體的那個節點(文檔)
事件捕獲:不太具體的節點應該更早接收到事件而最具體的節點最後接收到事件
IE——事件冒泡流
事件對象:在觸發DOM上的事件時都會產生一個對象
DOM中的事件對象
- type屬性 用於獲取事件類型
- target屬性 用於獲取事件目標
- stopPropagation 阻止事件冒泡
- preventDefault() 阻止事件的預設行為
IE中的事件對象
- type屬性 用於獲取事件類型
- srcElement屬性 用於獲取事件的目標
- cancelBubble屬性 用於阻止事件冒泡 設置為true表示阻止冒泡 設置為false表示不阻止冒泡
- returnValue屬性 用於阻止事件的預設行為 設置為false表示阻止事件的預設行為
事件處理程式
html事件處理程式
html事件缺點:html和js緊密耦合在一起
<input type="button" value="按鈕1" id="btn1" onclick="alert('hello')">
<input type="button" value="按鈕2" id="btn2" onclick="showMes()">
DOM0級事件處理程式
較傳統的方式:把一個函數賦值給一個事件的處理程式的屬性
用的比較多的方法 簡單 跨瀏覽器的優勢
btn3.onclick = function() {
alert('這是通過DOM0級添加的事件');
}
btn3.onclick = null;
DOM2級事件處理程式
DOM2級定義了兩個方法:用於處理指定和刪除事件處理程式的操作
addEventListener()和removeEventListener()
接收三個參數:要處理的事件名、作為事件處理程式的函數、布爾值
var btn4 = document.getElementById('btn4');
btn4.addEventListener('click',showMes,false);
// false冒泡
btn4.addEventListener('click',function(){
alert(this.value);
},false);
刪除事件
btn4.removeEventListener('click',showMes,false);
IE事件處理程式
attachEvent()添加事件
detachEvent()刪除事件
接收相同的兩個參數:事件處理程式的名稱和事件處理程式的函數
不使用第三個參數的原因:IE8及更早的瀏覽器版本只支持事件冒泡
var btn5 = document.getElementById('btn5');
btn5.attachEvent('onclick',showMes);
btn5.detachEvent('onclick',showMes);
跨瀏覽器的事件處理程式
var eventUtil = {
// 添加句柄
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.detachEvent('on' + type, handler);
} else {
element['on' + type] = null;
}
},
getEvent: function(event) {
// event = event || window.event;
return event ? event : window.event;
},
getType:function(event){
return event.type;
},
getElement:function(event){
return event.target||event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){
if (event.stopPropagation) {
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
}
eventUtil.addHandler(btn5, 'click', showMes);
eventUtil.addHandler(box, 'click', function(){
alert('父盒子');
});
eventUtil.addHandler(go, 'click', function(e){
e=eventUtil.getEvent(e);
alert(eventUtil.getElement(e));
eventUtil.stopPropagation(e);
eventUtil.preventDefault(e);
});