JavaScript事件的冒泡及委派

事件的冒泡及取消冒泡

事件的冒泡（Bubble）
事件向上传导，当后代元素的事件被触发时，其祖先元素的相同事件也会被触发
在开发中，大部分冒泡都是有用的，如果不希望发生冒泡可以通过冒泡事件来取消冒泡

通过一个简单的例子来简述事件的冒泡及取消冒泡

html代码：

<div id="box1">
    我是box1
    <span id="s1">我是span</span>
</div>

css代码：

<style>
    #box1{
        width: 300px;
        height: 100px;
        background-color: aquamarine;
        font-size: 30px;
    }

    #s1{
        background-color: cornflowerblue;
        font-size: 20px;
    }
</style>

js代码：

<script>
    window.onload = function(){
        //事件的冒泡Bubble
        var s1 = document.getElementById("s1");
        s1.onclick = function(event){
            event = event || window.event;
            alert("我是span的单击相应函数");

            //取消冒泡
            event.cancelBubble = true;
        };
        var box1 = document.getElementById("box1");
        box1.onclick = function(){
            alert("我是box1的单击相应函数");
        };
        var body = document.body;
        body.onclick = function(){
            alert("我是body的单击相应函数");
        };
    };
</script>

1. 若不取消冒泡
   当点击“我是span”，会陆续出现三个弹窗，即为s1，box1，body三个弹窗，这就是事件的冒泡。事件向上传导，当后代元素的事件被触发时，其祖先元素的相同事件也会被触发。
2. 取消冒泡
   这里取消了s1的冒泡，当刷新页面重新点击“我是span”，只会出来“我是span的单击相应函数”的弹窗

---

---

事件的委派

页面添加一个超链接，点击按钮后，会添加新的超链接，且具有超链接的性质
（希望只绑定一次事件，可应用到多个元素上 即使元素是后添加的）

1. 添加超链接
   （添加class的目的是为了后面更好的用到事件的委派，使三个li有相同的class，就可以有相同的事件，但也有局限性，若添加了含link的不止一个class，则事件不会触发）

<ul id="u1">
    <li><a href="javascript:;" class="link">超链接1</a></li>
    <li><a href="javascript:;" class="link">超链接2</a></li>
    <li><a href="javascript:;" class="link">超链接3</a></li>
</ul>

3. 添加按钮

<button id="btn1">添加一个超链接</button>

 注：以下js代码需在window.onload = function(){};中运行

5. 为每一个超链接绑定事件

//为每一个超链接绑定事件
 var allA = document.getElementsByTagName("a");
 for(var i = 0; i < allA.length; i++){
     allA[i].onclick = function(){
         alert("dwes");
     };
 }

7. 点击按钮以后添加超链接

var ul = document.getElementById("u1");
var btn = document.getElementById("btn1");
btn.onclick = function(){
    //创建一个li
    var li = document.createElement("li");
    li.innerHTML = "<li><a href='javascript:;' class='link'>new超链接</a></li>";

    //将li添加到ul中
    
    ul.appendChild(li);
};

不难看出，为每一个超链接绑定事件，就显得比较影响程序的性能

• 这里就可以用到事件的委派：将事件统一委派给共同的祖先元素，这样当后代元素上的事件被触发时，会一直冒泡到祖先，从而通过祖先元素的相应函数来处理事件

li元素的父元素是ul，那我们就为ul绑定事件

ul.onclick = function(){
    //如果触发事件的对象时我们期望的元素，则执行否则不执行
    if(event.target.className == "link"){
        alert("wec");
    }
};

事件委派利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能