trigger 和 triggerHandler()，自定义事件

 语法：

 $(selector).trigger(event,[param1,param2,...])

     1，event  必需。规定指定元素要触发的事件。

     2，[param1,param2,...]  可选。传递到事件处理程序的额外参数。

 额外的参数对自定义事件特别有用。

 可以使自定义事件（使用 bind() 函数来附加），或者任何标准事件。

 ========================

 triggerHandler() 方法触发被选元素上指定的事件。

 该方法的返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。此外，如果没有处理程序被触发，则这个方法返回 undefined。

 该方法与 trigger() 方法类似，不同的是 trigger() 也触发事件的默认行为（比如表单提交）。

 triggerHandler() 与 trigger() 方法相比的不同之处:

     1，它不会引起事件（比如表单提交）的默认行为,

     2，.trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。

     3，由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。

 ========================

 <html>

 <head>

     <!-- 这里必须引入jQuery.js否则无法正常运行 -->

 <script type="text/javascript" src="js/jquery.js"></script>

 <script type="text/javascript">

     $(document).ready(function(){

       $("input").select(function(){

         $("input").after("文本被选中！");

       });

       $("button").click(function(){

         $("input").trigger("select");

       });

     });

 </script>

 </head>

 <body>

 <input type="text" name="FirstName" value="Hello World" />

 <br />

 <button>激活 input 域的 select 事件</button>

 </body>

 </html>

 =================

 <html>

 <head>

     <!-- 这里必须引入jQuery.js否则无法正常运行 -->

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   $("input").select(function(){

     $("input").after("文本被选中！");

   });

   var e = jQuery.Event("select");

   $("button").click(function(){

     $("input").trigger(e);

   });

 });

 </script>

 </head>

 <body>

 <input type="text" name="FirstName" value="Hello World" />

 <br />

 <button>激活 input 域的 select 事件</button>

 </body>

 </html>

 ==================

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

     <h2>自定义事件trigger</h2>

         <div class="left">

             <div><span></span><span>0</span>点击次数</div>

             <button>直接点击</button>

             <button>通过自定义点击</button>

         </div>

         <!-- 这里必须引入jQuery.js否则无法正常运行 -->

         <script src="js/jquery.js"></script>

         <script type="text/javascript">

         //点击更新次数

         $("button:first").click(function(event,bottonName) {

             bottonName = bottonName || 'first';

             update($("span:first"),$("span:last"),bottonName);

         });

         //通过自定义事件调用，更新次数

         $("button:last").click(function() {

             $("button:first").trigger('click','last');

         });

         function update(first,last,bottonName) {

             first.text(bottonName);

             var n = parseInt(last.text(), 10);

             last.text(n + 1);

         }

         </script>

 </body>

 </html>

 ================

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

     <h2>自定义事件triggerHandler</h2>

     <div class="left">

         <div id="accident">

             <a>triggerHandler事件</a>

             <input type="text">

         </div>

         <button>事件冒泡,触发浏览器默认聚焦行为</button><br><br>

         <button>不会冒泡，不触发浏览器默认聚焦行为</button>

     </div>

     <!-- 这里必须引入jQuery.js否则无法正常运行 -->

     <script src="js/jquery.js"></script>

     <script type="text/javascript">

         //给input绑定一个聚焦事件

         $("input").on("focus",function(event,title) {

             $(this).val(title)

         });

         $("#accident").on("click",function() {

             alert("trigger触发的事件会在 DOM 树中向上冒泡");

         });

         //trigger触发focus

         $("button:first").click(function() {

             $("a").trigger("click");

             $("input").trigger("focus");

         });

         //triggerHandler触发focus

         $("button:last").click(function() {

             $("a").triggerHandler("click");

             $("input").triggerHandler("focus","没有触发默认聚焦事件");

         });

     </script>

 </body>

 </html>

 ==========以下是triggerHandler()方法============

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>菜鸟教程(runoob.com)</title>

 <!-- 这里必须引入jQuery.js否则无法正常运行 -->

 <script src="js/jquery.js"></script>

 <script>

 $(document).ready(function(){

   $("input").select(function(){

     $("input").after("select 事件触发！");

   });

   $("button").click(function(){

     $("input").triggerHandler("select");

   });

 });

 </script>

 </head>

 <body>

 <input type="text" value="Hello World">

 <br><br>

 <button>触发输入框的 select 事件</button>

 <p>该方法与 trigger() 方法类似，不同的是 trigger() 也触发事件的默认行为（比如表单提交）。</p>

 </body>

 </html>

trigger 和 triggerHandler()，自定义事件语法：$(selector).trigger(event,[param1,param2,...])    1，event  必需。规定指定元素要触发的事件。    2，[param1,param2,...]  可选。传递到事件处理程序的额外参数。
额外的参数对自定义事件特别有用。可以使自定义事件（使用 bind() 函数来附加），或者任何标准事件。========================triggerHandler() 方法触发被选元素上指定的事件。
该方法的返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。此外，如果没有处理程序被触发，则这个方法返回 undefined。
该方法与 trigger() 方法类似，不同的是 trigger() 也触发事件的默认行为（比如表单提交）。
triggerHandler() 与 trigger() 方法相比的不同之处:    1，它不会引起事件（比如表单提交）的默认行为,    2，.trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。    3，由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。========================<html><head>    <!-- 这里必须引入jQuery.js否则无法正常运行 --><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">    $(document).ready(function(){      $("input").select(function(){        $("input").after("文本被选中！");      });      $("button").click(function(){        $("input").trigger("select");      });    });</script></head><body><input type="text" name="FirstName" value="Hello World" /><br /><button>激活 input 域的 select 事件</button></body></html>=================<html><head>    <!-- 这里必须引入jQuery.js否则无法正常运行 --><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("input").select(function(){    $("input").after("文本被选中！");  });  var e = jQuery.Event("select");  $("button").click(function(){    $("input").trigger(e);  });});</script></head><body><input type="text" name="FirstName" value="Hello World" /><br /><button>激活 input 域的 select 事件</button></body></html>==================<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <h2>自定义事件trigger</h2>        <div class="left">            <div><span></span><span>0</span>点击次数</div>            <button>直接点击</button>            <button>通过自定义点击</button>        </div>        <!-- 这里必须引入jQuery.js否则无法正常运行 -->        <script src="js/jquery.js"></script>        <script type="text/javascript">
        //点击更新次数        $("button:first").click(function(event,bottonName) {            bottonName = bottonName || 'first';            update($("span:first"),$("span:last"),bottonName);        });
        //通过自定义事件调用，更新次数        $("button:last").click(function() {            $("button:first").trigger('click','last');        });
        function update(first,last,bottonName) {            first.text(bottonName);            var n = parseInt(last.text(), 10);            last.text(n + 1);        }        </script></body></html>================<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <h2>自定义事件triggerHandler</h2>    <div class="left">        <div id="accident">            <a>triggerHandler事件</a>            <input type="text">        </div>        <button>事件冒泡,触发浏览器默认聚焦行为</button><br><br>        <button>不会冒泡，不触发浏览器默认聚焦行为</button>    </div>    <!-- 这里必须引入jQuery.js否则无法正常运行 -->    <script src="js/jquery.js"></script>    <script type="text/javascript">
        //给input绑定一个聚焦事件        $("input").on("focus",function(event,title) {            $(this).val(title)        });
        $("#accident").on("click",function() {            alert("trigger触发的事件会在 DOM 树中向上冒泡");        });        //trigger触发focus        $("button:first").click(function() {            $("a").trigger("click");            $("input").trigger("focus");        });
        //triggerHandler触发focus        $("button:last").click(function() {            $("a").triggerHandler("click");            $("input").triggerHandler("focus","没有触发默认聚焦事件");        });    </script></body></html>==========以下是triggerHandler()方法============<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <!-- 这里必须引入jQuery.js否则无法正常运行 --><script src="js/jquery.js"></script><script>$(document).ready(function(){  $("input").select(function(){    $("input").after("select 事件触发！");  });  $("button").click(function(){    $("input").triggerHandler("select");  });});</script></head><body>
<input type="text" value="Hello World"><br><br><button>触发输入框的 select 事件</button><p>该方法与 trigger() 方法类似，不同的是 trigger() 也触发事件的默认行为（比如表单提交）。</p>
</body></html>

trigger 和 triggerHandler()，自定义事件的更多相关文章

  1. jquery的自定义事件通过on绑定trigger触发

    jquery绑定自定义事件,可以实现预先绑定好一个处理方法,当需要使用的时候利用jquery trigger来触发自定义事件,以达到方便快捷的目的.我们来假设一个这样的场景,一个textarea中的字 ...

  2. "自定义事件"的优点在哪里？

    事实上我们可以通过bind绑定一个自定义事件,然后再通过trigger来触发这个事件.例如给element绑定一个hello事件,再通过trigger来触发这个事件: //给element绑定hell ...

  3. jQuery事件命名空间多事件绑定自定义事件js 命名空间 javascript命名空间

    http://blog.csdn.net/pigpigpig4587/article/details/24727791 jQuery事件命名空间 jQuery支持事件命名空间,以方便事件管理.例如,在 ...

  4. trigger,triggerhandler模拟事件

    常用模拟 有时候,需要通过模拟用户操作,来达到单击的效果.例如在用户进入页面后,就触发click事件,而不需要用户去主动单击. 在JQuery中,可以使用trigger()方法完成模拟操作.例如可以使 ...

  5. 主动触发事件 自定义事件 trigger 及其用法

    1. 触发自定义事件方式 js.jq 2. jq 触发 2.1 默认支持的事件 $('#h').on('click',function(){ $(this).append('<p>p< ...

  6. 【jQuery】【转】jQuery中的trigger和triggerHandler区别

    trigger(event, [data]) 在每一个匹配的元素上触发某类事件. 这个函数也会导致浏览器同名的默认行为的执行.比如,如果用trigger()触发一个'submit',则同样会导致浏览器 ...

  7. javascript和jquey的自定义事件小结

    “通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率.” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好 对象之间通过直接方法调用来交互 1)对象A直接调用 ...

  8. 使用jQuery中trigger()方法自动触发事件

    一.常用事件 在页面加载完成时  自动触发input的点击事件,在移动端可以实现自动弹出输入法,获得焦点 $("input").trigger("click") ...

  9. jQuery 的自定义事件

    jQuery  中,想要自动触发自定义事件,必须满足2个条件: 1.事件必须是通过on 来绑定的. 2.事件必须是通过trigger / triggerHandler 来触发. 格式如下: $(fun ...

随机推荐

  1. 修改织梦DedeCMS投票漏洞

    织梦/dedecms系统我们都知道是有很多漏洞的,我在调试投票功能的时候正好要用到投票功能,这不就出现了漏洞,下面我就给大家展示如何修复这个织梦投票漏洞 首先我们打开//dedevote.class. ...

  2. linux终端提示符修改

    Linux主机名莫名其妙的由@myhostname变成了@bogon了之后 1.在linux下添加一个127.0.0.2名叫bogon的主机此方法使用后,bogon主机名得以解析,使用的主机名仍为bo ...

  3. c++实现双端队列

    在使用c++容器的时候其底层如何实现  例如  vector 容器  :是一个内存可以二倍扩容的向量容器,使用方便但是对内存要求严格,弊端明显    list  容器  : 双向循环链表    deq ...

  4. 【Linux】一步一步学Linux——Unix发展史(02)

    目录 00. 目录 01. 请参考Unix传奇 02. 03. 00. 目录 @ 本博客后面会更新 01. 请参考Unix传奇 链接: https://coolshell.cn/articles/23 ...

  5. SPA中使用jwt

    什么是jwt? JSON Web Token (JWT),它是目前最流行的跨域身份验证解决方案 JWT的工作原理 1. 是在服务器身份验证之后,将生成一个JSON对象并将其发送回用户,示例如下:{&q ...

  6. IdentityServer4 手动验签及日志记录

    IdentityServer4的基础知识和使用方式网上有很多特别优秀的文章,如果有对其不了解的推荐阅读一下下面的两篇文章 http://www.ruanyifeng.com/blog/2014/05/ ...

  7. Advanced REST Client 的安装

    1.解压Advanced-REST-client_v3.1.9.zip到当前文件夹,得到Advanced-REST-client_v3.1.9目录      2.在Chrome浏览器中打开:chrom ...

  8. redis主从中断异常处理

    线上预警主从中断: 查看线上复制信息: # Replication role:slave master_host:master_host master_port:6379 master_link_st ...

  9. Java8新特性 - 方法引用与构造器引用

    方法引用 若Lambda体中的内容有方法已经实现了,我们可以使用"方法应用",可以理解为方法引用是Lambda表达式的另外一种表现形式. 使用操作符"::"将方 ...

  10. ClickOnce 部署 API 以编程方式检查应用程序更新

    private void InstallUpdateSyncWithInfo() { UpdateCheckInfo info = null; if (ApplicationDeployment.Is ...