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,所以页面是在冒泡阶段处理绑定事件。此时整个页面可以有三种行为出现:

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

  2. 点击文字hello时,先弹出world,再弹出hello


    image.png
  1. 点击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);
    }
  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。