美文网首页
6-2触发器

6-2触发器

作者: 大庆无疆 | 来源:发表于2019-04-23 00:33 被阅读0次

    有三种方式可以触发

    相关方法
    trigger(事件名称)
    triggerHandler(事件名称)

    triggerHandler和前面两种的区别是,他不会触发浏览器默认行为
    triggerHandler只会触发JQ对象集合中第一个元素的事件处理函数

    <body>
      <input type="button" name="" id="btn1" value="获取">
    
      <div id="box">
        <p>我是一个P</p>
      </div>
    </body>
    
    <script type="text/javascript">
    $(function () {
      // 给box绑定事件
      $('#box').click(function () {
        console.log('box');
      });
      // 给p标签绑定事件
      $('p').click(function () {
        console.log($(this).text());
      });
    
      // 给按钮绑定事件来触发事件
      $('#btn1').on('click', function () {
        触发器
        triggerHandler和前面两种的区别是,他不会触发浏览器默认行为
        triggerHandler只会触发JQ对象集合中第一个元素的事件处理函数
    
        ----------第一种---------
        $('p').click(); --->输出:
    /*  我是P1
        我是一个P2
        box  --->这里输出 box 是因为事件冒泡的原因
    */
        ---------------第二种----------
        $('p').trigger('click'); -->输出:
      /*我是P1
        我是一个P2
        box  --->这里输出 box 是因为事件冒泡的原因
    */
        -----------第三种----------
        $('p').triggerHandler('click'); -->输出
      //我是P1
    
        由此可以看出:triggerHandler只会触发JQ对象集合中第一个元素的事件处理函数,所以在div中的p没有被触发
      });
    });
     </script>
    

    相关文章

      网友评论

          本文标题:6-2触发器

          本文链接:https://www.haomeiwen.com/subject/avnpgqtx.html