Web APIs---7. 事件高级(3)

5 阻止事件冒泡

5.1 阻止事件冒泡的两种方式

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点。事件冒泡本身的特性会带来坏处也会带来好处。

阻止事件冒泡

标准写法：利用事件对象里面的stopPropagation()方法

e.stopPropagation()

非标准写法：IE6-8利用事件对象cancleBubble属性

e.cancelBubble = true;

兼容性写法

//3. 兼容性方案
if (e && e.stopPropagation) {
    e.stopPropagation();
} else {
    window.event.cancelBubble = true;
}

举例：

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // 冒泡阶段：document<-html<-body<-father<-son 
        var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');

            //阻止冒泡   dom推荐的标准stopPropagation
            //1.
            e.stopPropagation(); //这样点击son之后只会弹出son这一个对话框，不会再弹出father和document
            //2.
            e.cancelBubble = true; //非标准写法 低版本浏览器
            //3. 兼容性方案
            if (e && e.stopPropagation) {
                e.stopPropagation();
            } else {
                window.event.cancelBubble = true;
            }
        }, false);
        //注意上述代码只是阻止点击son时出现的冒泡，若是点击father还是会出现冒泡，所有还要将上述代码放到father中

        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);

        document.addEventListener('click', function() {
            alert('document');
        })
    </script>
</body>

6 事件委托（代理、委派）

事件冒泡本身的特性会带来坏处也会带来好处，需要灵活掌握。生活中有如下场景：

生活中
程序中

事件委托

事件委托也称为事件代理，在jQuery里面称为事件委派

事件委托的原理

不是每个子节点都单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
以上案例：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件就会冒泡到ul上，ul有注册事件就会触发事件监听器

事件委托的作用

我们只操作了一次DOM，提高了程序的性能

举例：

<body>
    <ul>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
    </ul>
    <script>
        //点击一个小li就会弹出一个对话框，之后这个被点击的小li就会变成粉色
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            alert('知否知否，点我应有弹框在手！'); //这样点击任何一个小li都会弹出这句话
            e.target.style.backgroundColor = 'pink';
        })
    </script>
</body>