码迷,mamicode.com
首页 > 其他好文 > 详细

事件委托详解

时间:2016-12-02 18:31:46      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:加载   网络   整理   play   splay   win   分发   事件委托   cti   

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 分别加载了事件,但是我们只是给父集加了事件,这就是事件委托的好处。不需要分别给每个元素添加事件。

事件委托详解

标签:加载   网络   整理   play   splay   win   分发   事件委托   cti   

原文地址:http://www.cnblogs.com/my-effort/p/6126452.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!