原理
DOM2.0的事件模型是這樣的
- 捕獲階段 :如果某個(gè)元素觸發(fā)一個(gè)事件癌佩，如onclick木缝，頂層對(duì)象document就會(huì)發(fā)出一個(gè)事件流，隨著DOM樹往目標(biāo)元素流去围辙，沿途的元素如果綁定了事件我碟，它是不會(huì)執(zhí)行的！ (原Netscape的事件執(zhí)行模式)
- 目標(biāo)元素階段： 到達(dá)了目標(biāo)元素酌畜，執(zhí)行它上面的綁定事件怎囚，但如果onclick只是個(gè)空實(shí)現(xiàn)，當(dāng)然是沒有效果啦!
- 起泡階段: 從目標(biāo)元素往頂層元素折回桥胞，如果沿途有onclick事件恳守，就隨個(gè)觸發(fā)！(原IE的事件執(zhí)行模式)
因此我們是點(diǎn)擊了a元素贩虾，但它的onclick事件為空催烘，當(dāng)事件流上浮到ul元素時(shí)，發(fā)現(xiàn)ul元素綁定了onclick事件缎罢，就執(zhí)行當(dāng)中的函數(shù)伊群。如果ul的祖先元素也綁定了onclick事件呢？策精！繼續(xù)執(zhí)行舰始！有多少執(zhí)行多少！看下面例子：
e.g.:
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style type="text/css">
body {
background: #fff;
}
a {
color: #8080C0;
text-decoration: none;
border-bottom: 2px solid #fff;
}
a:hover {
color: #336699;
border-bottom-color: #B45B3E;
}
</style>
<script type="text/javascript">
var addEvent = (function () {
if (document.addEventListener) {
return function (el, type, fn) {
el.addEventListener(type, fn, false);
};
} else {
return function (el, type, fn) {
el.attachEvent('on' + type, function () {
return fn.call(el, window.event);
});
}
}
})();
window.onload = function () {
var nav = document.getElementById("nav");
nav.onclick = function () {
var e = arguments[0] || window.event,
target = e.srcElement ? e.srcElement : e.target;
console.log(target.nodeName);
if (target.nodeName == "A")
target.style.backgroundColor = "red";
e.stopPropagation();
return false;
}
var wrapper = document.getElementById("wrapper");
addEvent(wrapper, 'click', function () {
this.style.backgroundColor = "blue";
console.log("冒泡過(guò)程連我也驚動(dòng)了咽袜！");
});
}
</script>
<title>delegate</title>
</head>
<body>
<div id="wrapper">
<ul id="nav">
<li><a >博客園</a></li>
<li><a >藍(lán)色理想</a></li>
<li><a >無(wú)憂腳本</a></li>
<li><a >javaeye</a></li>
<li><a >CSDN</a></li>
</ul>
</div>
</body>
</html>
基本思路
- 獲取所需元素的父元素
- 為父元素添加事件
- 獲取 event 和 target
- 篩選 target 并為其添加事件
- 阻止事件冒泡
window.onload = function () {
var nav = document.getElementById("nav");
nav.onclick = function () {
var e = arguments[0] || window.event,
target = e.srcElement ? e.srcElement : e.target;
console.log(target.nodeName);
if (target.nodeName == "A")
target.style.backgroundColor = "red";
e.stopPropagation();
return false;
}
var wrapper = document.getElementById("wrapper");
addEvent(wrapper, 'click', function () {
this.style.backgroundColor = "blue";
console.log("冒泡過(guò)程連我也驚動(dòng)了丸卷！");
});
}
參考自 javascript事件代理
