DOM事件学习，事件流、事件处理程序和事件对象
1.事件流
从页面中接收事件的顺序
IE:事件冒泡流
即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上转播至最不具体的节点(文档)。
Netscape：事件捕获流
不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件
2.事件处理程序
HTML事件处理程序
事件直接加在HTML代码中，不建议使用
DOM 0级事件处理程序
DOM 2级事件处理程序（IE不支持）
定义了两个方法：addEventListener() 和 removeEventListener()，这俩方法都接收三个参数：
要处理的事件名；
作为事件处理程序的函数名；
布尔值——冒泡（false）或捕获（true）
IE事件处理程序
attachEvent()和detachEvent()，接收相同的两个参数：事件处理程序的名称和事件处理程序的函数
//事件处理程序
<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">跳转</a>
</div>
<script>
function showMes(event){
alert("HTML事件处理程序")；
event.stopPropagation();//阻止事件冒泡
}
function stopGoto(event){
event.stopPropagation();
event.preventDefalult();//阻止事件默认行为
}
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var go= document.getElementById("go");
btn2.onclick = function(){
alert("DOM 0级事件处理程序！")
}
//btn2.onclick = null;//删除事件
//DOM 2级事件处理程序
btn3.addEventListener("click", showMes, false);//要用click而不用onclick！
btn3.addEventListener("click", function(){
alert(this.value);//this,引用被触发的元素
}, false);
//btn3.removeEventListener("click", showMes, false);//删除事件
</script>
跨浏览器事件处理程序
//将其封装在对象eventUtil中
var eventUtil = {
//添加句柄
addHandler:function(element, type, handler){
if(element.addEventListener){
element.addEventListener(type, handler, false);//DOM2级事件处理程序
}else if(element.attachEvent){
element.attachEvent("on"+type, handler);//因为DOM2里的type是没有‘on’的事件
}else{
element["on" + type] = handler;
}
}
}
eventUtil.addHandler(btn3, "click", showMes);
eventUtil.addHandler(go, "click", stopGoto);
3.事件对象
DOM中的事件对象
- type属性 用于获取事件类型
- target属性 用于获取事件目标
- stopPropagation()方法 用于阻止事件冒泡
- preventDefault()方法 阻止事件的默认行为
IE中的事件对象
- type属性 获取事件类型
- srcElement属性 获取事件目标
//
function showMes(enent){
event = event || window.event;//主要解决IE8之前的浏览器兼容
var ele = event.target || event.srcElement;
alert(ele);
event.stopPropagation();//阻止事件冒泡
}
- cancelBubble属性 阻止事件冒泡
- returnValue属性 阻止事件默认行为
示例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('我是整个父盒子');
});
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);
});
}；
