zepto 事件委托

朴灿烈づ我的快乐病毒、 2021-07-24 20:36 454阅读 0赞

$('父元素选择器').on('无on的事件','子元素选择器',function(){})'
    给父元素的子元素委托事件
    
    （1）同jq区别:可能会造成触发一个子元素事件会让所有子元素事件触发
    	 若满足以下情况,zepto中的事件委托,会类似将同级委托的所有元素的事件按代码执行顺序放进数组里,从实际触发的位置向后依次执行
      1、同一个父元素
      2、同一个事件
      3、多个委托事件之间有关联，比如两个委托事件互相调用对方选择的类
      4、具有绑定顺序，从当前位置向后执行，即之后有满足前三条的委托事件

代码示例:

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
      <title>jquery_事件委托</title>
      <style type="text/css">
        #box{ 
          width: 400px;
          background: green;
        }
        .a{ 
          width: 200px;
          height: 200px;
          background: #FF0000;
        }
        .b{ 
          width: 100px;
          height: 100px;
          background: #F0f;
        }
      </style>
    </head>
    <body>
      <div id="box">
        <div class="a">a的事件委托</div>
        <br />
        <br />
        <br />
        <div class="b">b的事件委托</div>
        <br />
        <br />
        <br />
        <div id="a">#a事件委托</div>
        <p>Click me!</p>
      </div>
    <script src="../../../js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    
        //在jquery中事件委托只是找相应的event.target触发元素进行的回调函数执行,其他的并不关心。
        $('#box').on("click",'.a',function(){ 
          alert('a事件');
          $(this).removeClass('a').addClass('b');
        });
        $('#box').on("click",'.b',function(){ 
          alert('b事件');
          $(this).removeClass('b').addClass('a');
        });
    
      })
    </script>
    </body>
    </html>