首页 > 代码库 > 事件委托详解

事件委托详解

2024-08-24 17:51:26   224人阅读

1、通过网络搜索、对事件委托进行整理如下：

　　　　对于事件委托，从字面意思来看就是委托就是把事情交给别人去做，网上常用的例子就是送快递；

　　　　公司有三个人今天会同时收到快递，这时有2种方案解决，

　　　　　　1.三个人同时在公司门口等着快递（也就是说三个人绑定了同样的事）；

　　　　　　2.交给前台MM去代理收快递，然后进行通知分发给每个人；

　　　　通过上面的例子不难理解事件委托的意思，就是委托别人去帮我实现我的需求；

 

2、事件委托的原理就是通过冒泡的原理，比如div>ul>li  给父集DIV加事件  那么点击li的时候 通过冒泡就会找到父集执行的函数，我们可以通过src.target获取事件源，事件源就是事件是那个元素出发的。那么我们来看实例

　　

    <div id="divElem" onclick="clickWt(‘e‘)">
        <h1 class="city" id="city">City</h1>
        <ul class="oUl" id="oUl">
            <li>广东</li>
            <li>深圳</li>
            <li>长春</li>
            <li>上海</li>
            <li>北京</li>
        </ul>
    </div>

JS代码部分：

    var flog = true;
    function clickWt(){
        var e = e || window.event;
        var tar = e.target || e.srcElement;
        //通过tagName 获取事件源元素 执行相应操作
        if(tar.tagName == ‘H1‘){
            if(flog){
                oUl.style.display = ‘block‘;
                flog = !flog;
            }else{
                oUl.style.display = ‘none‘;
                flog = !flog
            }
        }else if(tar.tagName == ‘LI‘){
                city.innerHTML = tar.innerHTML;
                oUl.style.display = ‘none‘;
                flog = !flog
        }
    }

这样我们就分别给Li 和 H1 分别加载了事件，但是我们只是给父集加了事件，这就是事件委托的好处。不需要分别给每个元素添加事件。

事件委托详解


联系
我们