前端学习笔记001－－事件代理

原理

DOM2.0的事件模型是这样的

1. 捕获阶段 :如果某个元素触发一个事件，如onclick，顶层对象document就会发出一个事件流，随着DOM树往目标元素流去，沿途的元素如果绑定了事件，它是不会执行的！ (原Netscape的事件执行模式)
2. 目标元素阶段： 到达了目标元素，执行它上面的绑定事件，但如果onclick只是个空实现，当然是没有效果啦!
3. 起泡阶段: 从目标元素往顶层元素折回，如果沿途有onclick事件，就随个触发！(原IE的事件执行模式)

---

因此我们是点击了a元素，但它的onclick事件为空，当事件流上浮到ul元素时，发现ul元素绑定了onclick事件，就执行当中的函数。如果ul的祖先元素也绑定了onclick事件呢？！继续执行！有多少执行多少！看下面例子：

e.g.:

    
    
    
    
    



    

        

            
博客园
            
蓝色理想
            
无忧脚本
            
javaeye
            
CSDN
        
    

基本思路

1. 获取所需元素的父元素
2. 为父元素添加事件
3. 获取 event 和 target
4. 筛选 target 并为其添加事件
5. 阻止事件冒泡

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事件代理