js事件介绍——冒泡&捕获%代理

1.事件冒泡&捕获

事件捕获：从最外层的元素对象开始触发，最后执行最内层的元素对象
事件冒泡：事件从最内层的元素对象开始触发，最后执行最外层的元素对象
捕获和冒泡过程图

image.png

案例：

<body>
    <div id="obj1">
        welcome
        <h5 id="obj2">hello</h5>
        <h5 id="obj3">word</h5>
    </div>


    <script>
        let obj01 = document.getElementById('obj1');  
        let obj02 = document.getElementById("obj2");

        obj01.addEventListener('click', function () {
            alert('hello!');
        });

        obj02.addEventListener("click", function () {
            alert("word！");
        });
    </script>
</body>

分别在obj1,obj2上绑定了一个点击事件，由于addEventListener的第三个参数为默认为false,所以页面是在冒泡阶段处理绑定事件。此时整个页面可以有三种行为出现：

点击文字welcome时，弹出hello
此时就只触发了绑定在obj1上的点击事件。具体冒泡实现过程如下：welcome 属于文本节点，点击后，开始从文本节点查找，当前文本节点没有绑定点击事件，继续向上找，找到父级（id为obj1的div），有绑定的点击事件，执行，再向上找，body，没有绑定点击事件，再到html,document,都没再有绑定的点击事件，整个冒泡过程结束。
点击文字hello时，先弹出world，再弹出hello

image.png

点击world时，弹出hello
具体冒泡过程和第二种情况类似，如下图

image.png

2.事件委托（代理）

事件委托是利用事件的冒泡原理来实现的

案例1：利用事件委托实现点击li，弹出123

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

  <script>
        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);
                }
            }
        }
    </script>

给父元素对象设置点击事件，让事件代理的效果跟直接事件对象节点的事件效果一样，比如给ul设置点击事件，但只有点击li才会触发，需要用到Event对象，Event对象提供了一个属性叫target，可以返回事件的目标节点，target就可以表示为当前的事件操作的dom；标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写再做比较

给父标签设置点击事件，使用事件委托减少dom操作

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);
　　　　}
　　}
}