javascript 事件代理及应用

事件代理又叫事件委托在前端发开中实际是非常有用的，说事件代理之前我们先说说事件绑定

    <p onclick="test()" ></p> 

    function test(){
         do something.....
         alert(this);
    }

js 代码和 html 代码耦合在了一起，不便于维护和开发,尽量不要使用这种方法绑定事件，还有一个不好的地方这样绑定事件this指向的是window而不是元素本身。
或者可以这样绑定

    <p class="text" >22</p> 

    var Text = document.querySelector('.text');
     Text.onclick = function(){
       alert(this.innerText) //22
    }
     

还有一种事件绑定(监听)的方法由于ie 和w3c提供的api不同存在兼容性问题一般要自己封装一下做兼容性的处理。

<p id="test">22</p>
var addEvent = function(elem,type,handler){
     if(window.addEventListener){
        addEvent = function(elem,type,handler){
            elem.addEventListener(type,handler,false);
        }
     }else if(window.attachEvent){
        addEvent = function(elem,type,handler){
            elem.attachEvent('on'+type,handler);
        }
     }
     addEvent(elem,type,handler);
   }

    var inp = document.querySelector("#test");

    addEvent(inp,'click',test);
    function test(){
        alert(this.innerText);  // 弹出22
    } 

好到现在为止常见的事件绑定方式说的都差不多了，事件代理的前提是要有事件绑定通过对父级或者父父级元素进行绑定看下面的例子。

<ul class="list">
        <li>1233</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
    <script>
      var oUl = document.querySelector(".list");
      oUl.onclick=function(e){
            e = e || window.event;
            var elem = e.target || e.srcElemnt;
            if(elem.tagName.toLowerCase() === 'li'){
                alert(elem.innerText);
            }
      }

    </script>

上面的几个例子都是alert出元素的innerText但是采用事件代理方式性能会跟好，因为他不需要给每一个li绑定一个事件只需要给父级绑定一个事件即可。我们看看jq实现事件代理的方式

<ul class="list">
        <li>1233</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
    <script>
        $('.list').on('click','li',delegate)
      function delegate(){
        alert($(this).text());
      }

        //或者这样但是推荐使用上面种方式 $('.list').delegate('li','click',delegate);

    </script>

使用事件代理的时候有一点需要注意的就是事件冒泡如果你的目标元素(上面的例子li就是目标元素)和目标元素父级或者父父级的tagNanme(标签名)相同的话事件就会冒泡的相同标签名的父级上这是就需要阻止事件冒泡。来看一个例子

    <style>

    .box1{
         position:relative;
         width:300px;
         height: 300px;
         background:red;
    }
    .box2{
         position:absolute;
         top:50px;
         left:50px;
         width:200px;
         height:200px;
         background:yellow;
    }
    .box3{
         top:50px;
         left:50px;
         position:absolute;
         width:100px;
         height:100px;
         background:blue;
    }
    </style>
    <div class="box1" >
          box1
        <div class="box2">
              box2
            <div class="box3">
                 box3
            </div>
        </div>

    </div>
    <script>

       $('.box1').on('click','div',delegate)
      function delegate(){
        alert($(this).text());
      }
     //$('.list').delegate('li','click',delegate);

    </script>

在上面的例子中给box1绑定了一个事件弹出box1下面div的innerText当我们点击box3的时候对话框弹出了两次一次是box3的innerText一次是box2的innerText说明事件冒泡到了box3的父级box2哪里也被触发了一次aler innerText 这个时候我们就要用的阻止事件冒泡了。

    <style>

    .box1{
         position:relative;
         width:300px;
         height: 300px;
         background:red;
    }
    .box2{
         position:absolute;
         top:50px;
         left:50px;
         width:200px;
         height:200px;
         background:yellow;
    }
    .box3{
         top:50px;
         left:50px;
         position:absolute;
         width:100px;
         height:100px;
         background:blue;
    }
    </style>
    <div class="box1" >
          box1
        <div class="box2">
              box2
            <div class="box3">
                 box3
            </div>
        </div>

    </div>
    <script>

       $('.box1').on('click','div',delegate)
      function delegate(e){
               e.stopPropagation();
        alert($(this).text());
      }
     //$('.list').delegate('li','click',delegate);

    </script>

在原有的基础上多加了一句 e.stopPropagation(); 这样就可以得到我们想要的效果了。
事件代理一般用在什么样的场景呢？
1 当有多个相同标签名的元素需要绑定事件的时候如ul 下面的li需要给每个li绑定事件 我们就可以给ul去绑定事件去做处理。
2 从后端获取数据生成的节点元素需要绑定事件的时候。