DOM事件學(xué)習(xí)，事件流站刑、事件處理程序和事件對(duì)象
1.事件流
從頁(yè)面中接收事件的順序
IE:事件冒泡流
即事件最開(kāi)始由最具體的元素(文檔中嵌套層次最深的那個(gè)節(jié)點(diǎn))接收吝秕，然后逐級(jí)向上轉(zhuǎn)播至最不具體的節(jié)點(diǎn)(文檔)瘫析。
Netscape：事件捕獲流
不太具體的節(jié)點(diǎn)應(yīng)該更早接收到事件佛寿，而最具體的節(jié)點(diǎn)最后接收到事件
2.事件處理程序
HTML事件處理程序
事件直接加在HTML代碼中，不建議使用
DOM 0級(jí)事件處理程序
DOM 2級(jí)事件處理程序（IE不支持）
定義了兩個(gè)方法：addEventListener() 和 removeEventListener()何暇，這倆方法都接收三個(gè)參數(shù)：
要處理的事件名陶夜；
作為事件處理程序的函數(shù)名；
布爾值——冒泡（false）或捕獲（true）
IE事件處理程序
attachEvent()和detachEvent()裆站，接收相同的兩個(gè)參數(shù)：事件處理程序的名稱(chēng)和事件處理程序的函數(shù)
//事件處理程序
<div id="box">
<input type="button" value="按鈕" id="btn" onclick="showMes()">
<input type="button" value="按鈕2" id="btn2">
<input type="button" value="按鈕3" id="btn3">
<a href="event.html" id="go">跳轉(zhuǎn)</a>
</div>
<script>
function showMes(event){
alert("HTML事件處理程序")条辟；
event.stopPropagation();//阻止事件冒泡
}
function stopGoto(event){
event.stopPropagation();
event.preventDefalult();//阻止事件默認(rèn)行為
}
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var go= document.getElementById("go");
btn2.onclick = function(){
alert("DOM 0級(jí)事件處理程序！")
}
//btn2.onclick = null;//刪除事件
//DOM 2級(jí)事件處理程序
btn3.addEventListener("click", showMes, false);//要用click而不用onclick宏胯！
btn3.addEventListener("click", function(){
alert(this.value);//this,引用被觸發(fā)的元素
}, false);
//btn3.removeEventListener("click", showMes, false);//刪除事件
</script>
跨瀏覽器事件處理程序
//將其封裝在對(duì)象eventUtil中
var eventUtil = {
//添加句柄
addHandler:function(element, type, handler){
if(element.addEventListener){
element.addEventListener(type, handler, false);//DOM2級(jí)事件處理程序
}else if(element.attachEvent){
element.attachEvent("on"+type, handler);//因?yàn)镈OM2里的type是沒(méi)有‘on’的事件
}else{
element["on" + type] = handler;
}
}
}
eventUtil.addHandler(btn3, "click", showMes);
eventUtil.addHandler(go, "click", stopGoto);
3.事件對(duì)象
DOM中的事件對(duì)象
- type屬性 用于獲取事件類(lèi)型
- target屬性 用于獲取事件目標(biāo)
- stopPropagation()方法 用于阻止事件冒泡
- preventDefault()方法 阻止事件的默認(rèn)行為
IE中的事件對(duì)象
- type屬性 獲取事件類(lèi)型
- srcElement屬性 獲取事件目標(biāo)
//
function showMes(enent){
event = event || window.event;//主要解決IE8之前的瀏覽器兼容
var ele = event.target || event.srcElement;
alert(ele);
event.stopPropagation();//阻止事件冒泡
}
- cancelBubble屬性 阻止事件冒泡
- returnValue屬性 阻止事件默認(rèn)行為
示例event.js：
//event.js
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;
}
},
getEvent:function(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;
}
}
};
示例script.js
//script.js
window.onload=function(){
var go=document.getElementById('go'),
box=document.getElementById('box');
eventUtil.addHandler(box,'click',function(){
alert('我是整個(gè)父盒子');
});
eventUtil.addHandler(go,'click',function(e){
//e=eventUtil.getEvent(e);
e=e || window.event;
alert(eventUtil.getElement(e).nodeName);
eventUtil.preventDefault(e);
eventUtil.stopPropagation(e);
});
}羽嫡；
