JS事件（事件冒泡和事件捕獲）

qingyezhu發表於2015-11-01
JS事件
事件流：描述的是在頁面中接收事件的順序
事件冒泡：由最具體的元素接收，然後逐級向上傳播至最不具體的元素的節點（文件）
事件捕獲：最不具體的節點先接收事件，而最具體的節點應該是最後接收事件


DOM中：用於處理指定和刪除事件處理程式的操作addEventListener()和removeEventListener()。他們都接收三個引數：要處理的事件名、作為事件處理程式的函式和布林值(事件處理的時候)[true:事件捕獲時;false:事件冒泡時]
DOM中的事件物件：
type屬性 用於獲取事件型別;
target屬性 用於獲取事件目標
stopPropagation()方法 用於阻止事件冒泡
preventDefault()方法 用於阻止事件的預設行為

IE中：attachEvent()和detachEvent()，接收相同的兩個參宿：事件處理程式的名稱和事件處理程式的函式。
IE中的事件物件：
type屬性 用於獲取事件型別
srcElement屬性 用於後去事件目標
cancelBubble屬性 用於阻止事件冒泡[true:阻止事件冒泡;false:不阻止事件冒泡;]
returnValue屬性 用於阻止事件的預設行為 [false:阻止事件的預設行為;]


測試例子：

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>JS事件測試</title>
<script>
var eventUtil = {
//新增事件
addHandler: function(element, type, handler){
if(element.addEventListener){
//非IE下
element.addEventListener(type, handler, false);
}else if(element.attachEvent){
element.attachEvent('on' + type, handler);
}else{
//IE下
element['on' + type] = handler;
}
},
//刪除事件
removeHandler: function(element, type, handler){
if(element.removeEventListener){
//非IE下
element.removeEventListener(type, handler, false);
}else if(element.detachEvent){
element.detachEvent('on' + type, handler);
}else{
//IE下
element['on' + type] = null;
}
},
//獲取目標元素
getElement: function(event){
return event.target || event.srcElement;
},
//阻止預設行為
preventDefault: function(event){
if(event.preventDefault){
//非IE下
event.preventDefault();
}else{
//IE下
event.returnValue = false;
}
},
//阻止事件冒泡
stopPropagation: function(event){
if(event.stopPropagation){
//非IE下
event.stopPropagation();
}else{
//IE下
event.cancelBubble = true;
}
}
};
var btn = null, div = null;
window.onload = function(){
btn = document.getElementById('id');
eventUtil.addHandler(document.getElementById('divId'), 'click', showDivMsg);

eventUtil.addHandler(document.getElementById('addId'), 'click', addEvent);
eventUtil.addHandler(document.getElementById('removeId'), 'click', removeEvent);
}

function addEvent(){
eventUtil.addHandler(btn, 'click', showMsg);
}

function removeEvent(){
eventUtil.removeHandler(btn, 'click', showMsg);
}

function showMsg(event){
alert(eventUtil.getElement(event).getAttribute('data') + '事件');
eventUtil.preventDefault(event);
eventUtil.stopPropagation(event);
}

function showDivMsg(){
alert("DIV事件");
}


</script>

</head>
<body>
<div id="divId" data="事件冒泡">
<a id="id" href="http://baidu.com" data="預設行為">跳轉</a>
<span data="span">測試事件冒泡與事件捕獲</span>
<input type="button" value="新增按鈕" id="addId" data="新增"/>
<input type="button" value="刪除按鈕" id="removeId" data="刪除"/>
</div>
 </body>
 </html>

 

相關文章