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. 介绍几款常用的在线API管理工具

    在项目开发过程中,总会涉及到接口文档的设计编写,之前使用的都是ms office工具,不够漂亮也不直观,变更频繁的话维护成本也更高,及时性也是大问题.基于这个背景,下面介绍几个常用的API管理工具,方 ...

  2. awk简单使用

    1.awk格式 awk  [ 切割符号 ]  ' [ / pattern/ ]  函数语句 '   [ 文件名 ] 2.输出对应列 $0  全部 , $1 第一列  ,$2 第二列  ...... a ...

  3. JSP的部分知识(二）

    指令include和动作include的区别 通过之前的学习知道,JSP最后会被转译成Servlet如果是指令include <%@include file="footer.jsp&q ...

  4. fpga基础

    1.FPGA 的分类: 根据 FPGA 基本结构,可将其分为基于乘积项(Product-Term)技术的 FPGA 和基于查找表(Look-Up-Table)技术的 FPGA 两种. (1)基于乘积项 ...

  5. 实现CodeFirst自动数据迁移无需手动执行命令

    本主题假设您掌握了实体框架中 Code First 迁移的基本知识. 借助自动迁移功能,您无需对您所做的每一个更改都在程序包管理器控制台中手动Update-Database . 启用迁移 只需执行一次 ...

  6. django.http.request中QueryDict 对象

    在一个 HttpRequest 对象中, GET 和 POST 属性都是 django.http.QueryDict 的实例. QueryDict 是一个类似于字典的类,专门用来处理用一个键的多值.当 ...

  7. 使用Django时需要注意的八个要点

    1.在settings.py中使用os. path.dirname() 常用代码如下: # settings.py import os PROJECT_DIR = os.path.dirname(__ ...

  8. Python opencv提取视频中的图片

    作者:R语言和Python学堂链接:https://www.jianshu.com/p/e3c04d4fb5f3 这个函数就是本文要介绍的video2frames()函数,功能就是从视频中提取图片,名 ...

  9. [转]預防 Android Dex 64k Method Size Limit

    转载自:http://ingramchen.io/blog/2014/09/prevention-of-android-dex-64k-method-size-limit.html 08 Septem ...

  10. Installation Manager1.8安装

    1.下载地址: https://www-01.ibm.com/marketing/iwm/iwm/web/download.do?S_PKG=500005026&source=swerpws- ...