• jquery如何使用自定义事件triggerhandler


      在jquery中,可以使用triggerhandler来设计自定义事件,比如一般的事件:

    $('#id').on("click", function() {
        alert("Item clicked");
    }
    );
      而对于自定义事件,一般期望能达到如下的效果:

    $('#id').on("test.says.hello", function()
    {
        alert("Hello Cory");
    });

         这个就叫自定义事件了。又比如假如提供一个jquery的插件,比如是lightbox的效果,在打开时
       $(function() {
      $('#id').on("lightbox.open", function() {
         alert("The lightbox just opened. Woo!");
      });
    });
      则必须编写自定义事件如下:
    function open() {
     
       $('#id')triggerHandler({ type:"lightbox.open" }); 

    }

    如果自定义事件中需要有参数传出去,可以这样
        $('#id').triggerHandler({
        type:"lightbox.open",  
      var1:'Howdy', 
       information:'I could pass something here also' 
    });


    则调用的时候:
       $(function() {
      $('#id').on("lightbox.open", function(o) {  
      alert(o.var1 + " - " + o.information);
      });
    }
    );  

    下面来看下trigger和triggerhandler的区别:
    triggerHandler() 方法触发被选元素的指定事件类型。但不会执行浏览器默认动作,也不会产生事件冒泡。

    triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件(比如表单提交)的默认行为,而且只影响第一个匹配元素。

    与 trigger() 方法相比的不同之处
    它不会引起事件(比如表单提交)的默认行为
    .trigger() 会操作 jQuery 对象匹配的所有元素,而 .triggerHandler() 只影响第一个匹配元素。
    由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡;如果目标元素不直接处理它们,则不会发生任何事情。
    该方法的返回的是事件处理函数的返回值,而不是具有可链性的 jQuery 对象。此外,如果没有处理程序被触发,则这个方法返回 undefined。

    例子区别如下:


    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Insert title here</title>
      <script type="text/javascript" src="Scripts/jquery-1.3.2.min.js"></script>
      <script type="text/javascript">
      $(function() {
          $("#txtContent").focus(function() {
              $("#dv").html($("#dv").html() + "focus被触发。");
          });
     
          $("#btnTrigger").click(function() {
              $("#txtContent").trigger('focus');
              return false;
          });
     
          $("#btnTriggerHandler").click(function() {
              $("#txtContent").triggerHandler('focus');
          });
      });
      </script>
     </head>
     <body>
      <form id="myForm" action="">
          <input type="text" id="txtContent" name="txtContent" size="20" />
          <input type="button" id="btnTriggerHandler" name="btnTriggerHandler" value="TriggerHandler" />
          <input type="button" id="btnTrigger" name="btnTrigger" value="Trigger" />
          <div id="dv">
          </div>
          
              ①使用Trigger 时会先触发我们绑定的focus 事件,然后文本框会获得焦点,之后触发了浏览器默认的
     
              focus事件,所以trigger 会有两次输出。

             
     
              ②TriggerHandler 相对于 Trigger 只会触发我们绑定的focus,而不会触发浏览器的默认事件.所以
     
              只会有一次输出
          

         </form>
     </body>
    </html>


  • 相关阅读:
    Linux NFS服务器的安装与配置
    mysql 批量更新的四种方法
    解决 RHEL 7/ CentOS 7/Fedora 出现Unit iptables.service failed to load
    linux 搭建svn
    MYSQL的慢查询两个方法
    Apache 配置虚拟主机三种方式
    MYSQL explain详解
    php操作memcache的使用【转】
    PHPExcel中open_basedir restriction in effect的解决方法
    微信浏览器禁止app下载链接的两种处理方法
  • 原文地址:https://www.cnblogs.com/sky7034/p/2359540.html
Copyright © 2020-2023  润新知