事件委托和事件传播机制

<script>

/*

　事件委托

    定义: 子元素讲DOM事件的处理委托给父元素

    场景: 子元素众多尤其是动态增减对，

          为了避免创建过多的事件处理器

          为了避免同步地增减事件监听器，

          使用事件委托

    原理/优势：节约内存 + 方便管理 + 防止内存泄露

    API：通过e.target的特性判断事件发生在哪个子元素身上(特征：内容，样式，标签名...)

*/

// 注册事件

ul.onclick=function(e){

            //兼容事件对象

            var e = e || window.event

            //获取操作目标

            var tg=e.target || e.srcElement

            //判断当前目标是否为li

            if(tg.nodeName=="LI"){

                console.log(tg.innerHTML)

            }

}

// 绑定事件

ul.addEventListener("click", function (e) {

        /* 点击不同的末梢元素 有不同的处置方式 */

        // 点击LI时的处置方式

        if (e.target.nodeName === "LI") {

          // 打印li身上的文字

          console.log(e.target.innerText);

        }

});

/*

    事件委托的优势：

    1、节约内存：全局只有一个事件监听器对象

    2、方便管理：不委托时子元素动态增减，其绑定的事件监听器也要随之增减；

       PS:如果子元素已经移除，则其事件监听器也必须一并移除，否则会形成【内存泄露】

       PS:内存泄露：无用的对象充斥着内存，导致可用内存变少，程序越来越慢甚至崩溃；

 */

</script>

 

 

 

 

 

 

 

  /*

    事件传播机制：

    作用：在事件发生的时候确定由谁来消费(处理)；

    潜在消费者：e.path数组 [span,div,body,html,document,window]

    过程：

    + 确定传播方向：element.addEventListener("click",handler,true/false)//true=捕获,false=冒泡

    + 设置事件监听器：span.addEventListener(xxoo),body.addEventListener(xxoo),document.addEventListener(xxoo)

    + 适时中断传播：e.stopPropagation() 或者使用其备胎API：e.cancelBubble = false   =>   提示用 window.event.cancelBubble() 在函数里面中断

    div.addEventListener(事件，函数，布尔值)

    */