JS之捕获冒泡和事件委托

一、事件流（捕获，冒泡）

 

事件流：指从页面中接收事件的顺序，有冒泡流和捕获流。

当页面中发生某种事件（比如鼠标点击，鼠标滑过等）时，毫无疑问子元素和父元素都会接收到该事件，可具体顺序是怎样的呢？冒泡和捕获则描述了两种不同的顺序。

 

DOM2级事件规定事件流包括三个阶段，如图：

 

 

假如我们点击一个div, 实际上是先点击document，然后点击事件传递到div,而且并不会在这个div就停下，div有子元素就还会向下传递，最后又会冒泡传递回document，如上图

为了兼容更多的浏览器，非特殊情况一般我们都是把事件添加到在事件冒泡阶段。

二、事件委托

1、什么叫事件委托呢？

它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事件委托基本上都用了同一个例子，就是取快递来解释这个现象，我仔细揣摩了一下，这个例子还真是恰当，我就不去想别的例子来解释了，借花献佛，我摘过来，大家认真领会一下事件委托到底是一个什么原理：

有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

这里其实还有2层意思的：

第一，现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的；

第二，新员工也是可以被前台MM代为签收的，即程序中新添加的dom节点也是有事件的。

2、为什么要使用事件委托？

一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；

每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了，比如上面的100个li，就要占用100个内存空间，如果是1000个，10000个呢，那就顶不住了，如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，是不是省了很多，自然性能就会更好。

3、事件委托原理

事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

4、事件委托实现

子节点实现相同的功能：

<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

实现功能是点击li，弹出123：

window.onload = function(){
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName('li');
    for(var i=0;i<aLi.length;i++){
        aLi[i].onclick = function(){
            alert(123);
        }
    }
}

 上面的代码的意思很简单，相信很多人都是这么实现的，我们看看有多少次的dom操作，首先要找到ul，然后遍历li，然后点击li的时候，又要找一次目标的li的位置，才能执行最后的操作，每次点击都要找一次li；

那么我们用事件委托的方式做又会怎么样呢？

window.onload = function(){
    var oUl = document.getElementById("ul1");
   oUl.onclick = function(){
        alert(123);
    }
}

这里用父级ul做事件处理，当li被点击时，由于冒泡原理，事件就会冒泡到ul上，因为ul上有点击事件，所以事件就会触发，当然，这里当点击ul的时候，也是会触发的，那么问题就来了，如果我想让事件代理的效果跟直接给节点的事件效果一样怎么办，比如说只有点击li才会触发，不怕，我们有绝招：

Event对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写再做比较（习惯问题）：

window.onload = function(){
　　var oUl = document.getElementById("ul1");
　　oUl.onclick = function(ev){
　　　　var ev = ev || window.event;
　　　　var target = ev.target || ev.srcElement;
　　　　if(target.nodeName.toLowerCase() == 'li'){
　 　　　　　　 alert(123);
　　　　　　　  alert(target.innerHTML);
　　　　}
　　}
}

这样改下就只有点击li会触发事件了，且每次只执行一次dom操作，如果li数量很多的话，将大大减少dom的操作，优化的性能可想而知！

上面的例子是说li操作的是同样的效果，要是每个li被点击的效果都不一样，那么用事件委托还有用吗？

<div id="box">
        <input type="button" id="add" value="添加" />
        <input type="button" id="remove" value="删除" />
        <input type="button" id="move" value="移动" />
        <input type="button" id="select" value="选择" />
    </div>

window.onload = function(){
            var Add = document.getElementById("add");
            var Remove = document.getElementById("remove");
            var Move = document.getElementById("move");
            var Select = document.getElementById("select");
            
            Add.onclick = function(){
                alert('添加');
            };
            Remove.onclick = function(){
                alert('删除');
            };
            Move.onclick = function(){
                alert('移动');
            };
            Select.onclick = function(){
                alert('选择');
            }
            
        }

很简单，4个按钮，点击每一个做不同的操作，那么至少需要4次dom操作，如果用事件委托，能进行优化吗？

window.onload = function(){
            var oBox = document.getElementById("box");
            oBox.onclick = function (ev) {
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLocaleLowerCase() == 'input'){
                    switch(target.id){
                        case 'add' :
                            alert('添加');
                            break;
                        case 'remove' :
                            alert('删除');
                            break;
                        case 'move' :
                            alert('移动');
                            break;
                        case 'select' :
                            alert('选择');
                            break;
                    }
                }
            }
            
        }

用事件委托就可以只用一次dom操作就能完成所有的效果，比上面的性能肯定是要好一些的 

现在讲的都是document加载完成的现有dom节点下的操作，那么如果是新增的节点，新增的节点会有事件吗？

看一下正常的添加节点的方法：

<input type="button" name="" id="btn" value="添加" />
    <ul id="ul1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>

现在是移入li，li变红，移出li，li变白，这么一个效果，然后点击按钮，可以向ul中添加一个li子节点

window.onload = function(){
            var oBtn = document.getElementById("btn");
            var oUl = document.getElementById("ul1");
            var aLi = oUl.getElementsByTagName('li');
            var num = 4;
            
            //鼠标移入变红，移出变白
            for(var i=0; i<aLi.length;i++){
                aLi[i].onmouseover = function(){
                    this.style.background = 'red';
                };
                aLi[i].onmouseout = function(){
                    this.style.background = '#fff';
                }
            }
            //添加新节点
            oBtn.onclick = function(){
                num++;
                var oLi = document.createElement('li');
                oLi.innerHTML = 111*num;
                oUl.appendChild(oLi);
            };
        }

这是一般的做法，但是你会发现，新增的li是没有事件的，说明添加子节点的时候，事件没有一起添加进去，这不是我们想要的结果，那怎么做呢？一般的解决方案会是这样，将for循环用一个函数包起来，命名为mHover，如下：

window.onload = function(){
            var oBtn = document.getElementById("btn");
            var oUl = document.getElementById("ul1");
            var aLi = oUl.getElementsByTagName('li');
            var num = 4;
            
            function mHover () {
                //鼠标移入变红，移出变白
                for(var i=0; i<aLi.length;i++){
                    aLi[i].onmouseover = function(){
                        this.style.background = 'red';
                    };
                    aLi[i].onmouseout = function(){
                        this.style.background = '#fff';
                    }
                }
            }
            mHover ();
            //添加新节点
            oBtn.onclick = function(){
                num++;
                var oLi = document.createElement('li');
                oLi.innerHTML = 111*num;
                oUl.appendChild(oLi);
                mHover ();
            };
        }

虽然功能实现了，看着还挺好，但实际上无疑是又增加了一个dom操作，在优化性能方面是不可取的，那么有事件委托的方式，能做到优化吗？

window.onload = function(){
            var oBtn = document.getElementById("btn");
            var oUl = document.getElementById("ul1");
            var aLi = oUl.getElementsByTagName('li');
            var num = 4;
            
            //事件委托，添加的子元素也有事件
            oUl.onmouseover = function(ev){
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLowerCase() == 'li'){
                    target.style.background = "red";
                }
                
            };
            oUl.onmouseout = function(ev){
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLowerCase() == 'li'){
                    target.style.background = "#fff";
                }
                
            };
            
            //添加新节点
            oBtn.onclick = function(){
                num++;
                var oLi = document.createElement('li');
                oLi.innerHTML = 111*num;
                oUl.appendChild(oLi);
            };
        }

看，上面是用事件委托的方式，新添加的子元素是带有事件效果的，我们可以发现，当用事件委托的时候，根本就不需要去遍历元素的子节点，只需要给父级元素添加事件就好了，其他的都是在js里面的执行，这样可以大大的减少dom操作，这才是事件委托的精髓所在。

三、JS事件练习

1、在HTML中增加上面的代码，然后通过JavaScript编写如下功能：

• 当点击按钮 submit-btn 时，在console中输出 name 中的内容
• 在输入过程中，如果按回车键，则同样执行上一条的需求
• 在输入过程中，如果按 ESC 键，则把输入框中的内容清空

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>与页面对话1</title>
</head>
<body>
        <!-- // 使用 JavaScript 来向 HTML 元素分配事件 -->
        <!-- <input id="name" type="text" >     
        <button id="submit-btn">Submit</button>
        <script>
        var btn=document.getElementById("submit-btn");
        btn.onclick=function(){
            var intext=document.getElementById("name").value;
            console.log("ID为name的内容为："+intext);
        }
        //全局按键响应
        document.onkeydown=function getkey(){
            if(event.keyCode==13){
                var intext=document.getElementById("name").value;
                console.log("ID为name的内容为："+intext);
            }
            if(event.keyCode==32){
                var intext=document.getElementById("name");
                intext.value="";
            }
        }
        </script> -->
        <!-- // HTML 元素分配 事件，您可以使用事件属性 -->
        <input id="name" type="text" onkeydown="getkey()">     
        <button id="submit-btn" onclick="getname()">Submit</button>
        <script>
       
        function getname(){
            var intext=document.getElementById("name").value;
            console.log("ID为name的内容为："+intext);
        }
        //仅为输入框响应按键
        //注意kedCode要驼峰写法 
        function getkey(){
            if(event.keyCode==13){
                var intext=document.getElementById("name").value;
                console.log("ID为name的内容为："+intext);
            }
            if(event.keyCode==32){
                var intext=document.getElementById("name");
                intext.value="";
            }
        }
        </script>
</body>
</html>

2、基于HTML，实现以下功能：

• 当用户选择了 School 的单选框时，显示 School 的下拉选项，隐藏 Company 的下拉选项
• 当用户选择了 School 的单选框时，显示 Company 的下拉选项，隐藏 School 的下拉选项

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">    
    <title>与页面对话2</title>
    <style>
        select {
            display: none;
        }
    </style>
</head>
<body>            
    <label>
        <input id="school" name="status" type="radio">
        School
    </label>
    <label>
        <input id="company" name="status" type="radio">
        Company
    </label>

    <select id="school-select">        
        <option>北京邮电大学</option>
        <option>黑龙江大学</option>
        <option>华中科技大学</option>
    </select>

    <select id="company-select">        
        <option>百度</option>
        <option>爱奇艺</option>        
    </select>

    <script>
    //普通写法 内存占用较多 与dom交互次数较多
    var schoolRadio = document.querySelector('#school');
    var companyRadio = document.querySelector('#company');
    var schoolSelect = document.querySelector('#school-select');
    var companySelect = document.querySelector('#company-select');
    schoolRadio.onclick = function () {
        schoolSelect.style.cssText = "display:block"
          companySelect.style.cssText = 'display:hide';
    }
    companyRadio.onclick = function () {
        schoolSelect.style.cssText = 'display:hide';
          companySelect.style.cssText = "display:block"
    }
    //事件代理写法，减少与dom的交互次数，提高性能
    // function checkSelect(e) {
    //   if (e.target.checked) {
    //     console.log(1);
    //     if (e.target.id.indexOf('school') >= 0) {
    //       schoolSelect.style.cssText = "display:block";
    //       companySelect.style.cssText = 'display:hide';
    //     } else if (e.target.id.indexOf('company') >= 0) {
    //       schoolSelect.style.cssText = 'display:hide';
    //       companySelect.style.cssText = "display:block";
    //     }
    //   }
    // }
    // schoolRadio.addEventListener('click', checkSelect);
    // companyRadio.addEventListener('click', checkSelect);
    </script>
</body>
</html>

3、基于如上 HTML，实现如下功能：

• 点击某一个 Li 标签时，将 Li 的背景色显示在 P 标签内，并将 P 标签中的文字颜色设置成 Li 的背景色

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>与页面对话3</title>
    <style>
        .palette {
            margin: 0;
            padding: 0;
            height: 400px;
            list-style: none;
            background-color: #c0c0c0;
            width: 100px;
        }
        .palette li {
            width: 40px;
            height: 40px;
            border: 1px solid #000;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <ul class="palette">
        <li style="background-color:crimson"></li>
        <li style="background-color:bisque"></li>
        <li style="background-color:blueviolet"></li>
        <li style="background-color:coral"></li>
        <li style="background-color:chartreuse"></li>
        <li style="background-color:darkolivegreen"></li>
        <li style="background-color:cyan"></li>
        <li style="background-color:#5e9e89"></li>
        <p style="background-color:pink">joe</p>
    </ul>
    <p class="color-picker"></p>
    <script>
        //普通写法 内存占用较多 与dom交互次数较多
        // var list = document.querySelectorAll("li");
        // for (var i = 0, len = list.length; i < len; i++) {
        //     list[i].onclick = function(e) {
        //         var t = e.target;
        //         var c = t.style.backgroundColor;
        //         var p = document.getElementsByClassName("color-picker")[0]
        //         p.innerHTML = c;
        //         p.style.color = c;
        //     }
        // }
        //事件代理写法，减少与dom的交互次数，提高性能
        var oUl = document.querySelector("ul");
        var p = document.querySelector(".color-picker");
        console.log("p");
        oUl.onclick = function (e) {
            var e = e || window.event;
            var target = e.target || e.srcElement;
            var bgColor = target.style.backgroundColor;
            //增加判断是否为li标签，其他标签不响应。
            if (target.nodeName.toLowerCase() == "li") {
                console.log("joe");
                p.innerHTML = bgColor;
                p.style.color = bgColor;
            }
        }
    </script>
</body>
</html>