• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > JS应用 > JQuery模拟操作trigger()与triggerHandler()的区别

    JQuery模拟操作trigger()与triggerHandler()的区别

    作者: 分类:JS应用 点击: 2,251 次
    wordpress CMS主题:ssmay主题

      在制作网页特效时,我们有时会需要使用到模拟操作,即模拟人工手动操作。这时,我们会想到JQuery中的模拟操作方法trigger()和triggerHandler()这2个方法。这2个方法都能够简单实现模拟人工手动操作,那么它们有什么区别呢?下面,我们就通过一个简单案例来介绍一下它们的区别,这个案例效果:刷新页面,就会自动模拟点击按钮效果,弹出提示。

      首先,新建一个页面,在页面中添加如下html代码:

      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8" />
      <title>无标题文档</title>
      <style>
      *{padding:0; margin:0;}
      .hi{background:red;width:100px;height:100px; position:relative;}
      </style>
      <script type="text/javascript" src="/a/js/jquery-1.10.1.js"></script>
      <script type="text/javascript">

      </script>
      </head>
      <body>

      <div class="hi">
      <form action="http://wanlimm.com" >
      <input type="submit" value="aaa" />
      <input type="submit" value="bbb" />
      </form>

      </div>

      </body>

      </html>

      这段HTML代码的表单,有2个按钮,它们的值分别是“aaa”和“bbb”,现在点击这2个按钮中的任意一个,都会都得到http://wanlimm.com页面。

      然后,在<script type="text/javascript"></script>之间添加发下 JS 代码:

      $(function(){
      $(":submit").click(function(e){
      alert($(this).val());
      }).trigger('click');
      });

      这里,我们用到的trigger方法,刷新这个页面,会有2次弹窗,分别显示“aaa”和“bbb”,然后会自动使用表单行为自动跳转到http://wanlimm.com这个页面。

      如果把trigger换成triggerHandler ,就只会有1次弹窗,而且屏蔽表单行为,不会自动跳转到http://wanlimm.com页面。

      我们再把html代码中的标蓝的form代码去掉,然后,再在JS代码中连缀方法CSS,如下:

      $(function(){
      $(":submit").click(function(e){
      alert($(this).val());
      }).trigger('click').css('color','red');
      });

      我们刷新页面时,2次弹窗后,按钮中的文字会变成红色。但是,如果把 trigger 改成 triggerHandler 后,刷新页面后,只会1次弹窗,而不会文字变红。

      综上总结 trigger 与 triggerHandler 的区别

      1、triggerHandler()方法并不会触发事件的默认行为,而trigger()会。
      2、triggerHandler()方法只会影响第一个匹配到的元素,而.trigger()会影响所有。
      3、triggerHandler()方法不能连缀其它方法,因为它返回的是当前事件执行的返回值,而不是对象;trigger()可以连缀其它方法,因为它返回当前包含事件触发元素的 jQuery 对象。
      4、triggerHandler()在创建事件的时候,不会冒泡。trigger()会冒泡,但这种冒泡是自定义事件才能体现出来。



      QQ二维码

    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201509284849.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.