事件委托

Posted 2020-09-11

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

<div>
    <p><span>P</span></p>
    <h1><span>H1</span></h1>
</div>

var div = document.querySelector(‘div‘);
div.addEventListener(‘click‘,function(e){
    var ele = e.target;
    while(ele.tagName !== ‘H1‘){
        ele = ele.parentNode;
        if(ele === div){
            ele = null;
            break;
        }
    };
    if(ele){
        console.log(‘点击了div中的h1‘);
    }else{
        console.log(‘未点击div中的h1‘);
    }
});

想要对h1进行某种事件 首先获取外层div元素 给div添加一个点击事件 当点击内部子元素时,

首先判断当前点击元素是否正好是h1 如果是则执行‘点击了div中的h1‘ 否则将当前元素变为他的父元素 再次进行判断 直到找到h1,

如果已经找到了外层的div 还没有找到h1 则说明点击的并不是h1或其子元素 没有必要继续向外层查找 所以 将当前元素赋值为null,退出while循环 执行‘未点击div中的h1‘.