原理
DOM2.0的事件模型是这样的
- 捕获阶段 :如果某个元素触发一个事件，如onclick，顶层对象document就会发出一个事件流，随着DOM树往目标元素流去，沿途的元素如果绑定了事件，它是不会执行的！ (原Netscape的事件执行模式)
- 目标元素阶段： 到达了目标元素，执行它上面的绑定事件，但如果onclick只是个空实现，当然是没有效果啦!
- 起泡阶段: 从目标元素往顶层元素折回，如果沿途有onclick事件，就随个触发！(原IE的事件执行模式)
因此我们是点击了a元素，但它的onclick事件为空，当事件流上浮到ul元素时，发现ul元素绑定了onclick事件，就执行当中的函数。如果ul的祖先元素也绑定了onclick事件呢？！继续执行！有多少执行多少！看下面例子：
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("冒泡过程连我也惊动了！");
});
}
</script>
<title>delegate</title>
</head>
<body>
<div id="wrapper">
<ul id="nav">
<li><a href="http://www.cnblogs.com/">博客园</a></li>
<li><a href="http://www.blueidea.com/">蓝色理想</a></li>
<li><a href="http://www.51js.com/html/bbs.html">无忧脚本</a></li>
<li><a href="http://www.javaeye.com/">javaeye</a></li>
<li><a href="http://community.csdn.net/">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("冒泡过程连我也惊动了！");
});
}
参考自 javascript事件代理
