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. 面向对象分析与设计—OOA部分

    第二部分 面向对象分析 2.1 面向对象分析(OOA)的定义? OOA——面向对象的分析,就是运用面向对象方法进行系统分析,对问题域(问题所涉及的范围)和系统责任(所开发的系统应具备的职能)进行分析与 ...

  2. Python-05-字符串格式化

    一.百分号方式 %[(name)][flags][width].[precision]typecode (name)      可选,用于选择指定的key flags          可选,可供选择 ...

  3. 列主元消去法&全主元消去法——Java实现

    Gauss.java package Gauss; /** * @description TODO 父类,包含高斯列主元消去法和全主元消去法的共有属性和方法 * @author PengHao * @ ...

  4. mysql优化limit

    limit 1.当只需要一条数据的时候,用limit1: 2.当需要提高分页效率的时候: 如果用上面的语句分页少量数据还是可以用的,但是随着数据量越来越大,直接用limit语句查询速度就会越来越慢,降 ...

  5. zabbix添加自定义监控(自动发现)遇到的问题

    问题:zabbix添加自动发现端口,提示Value should be a JSON object [root@localhost zabbix_agentd.d]# zabbix_get -s 19 ...

  6. 集合并卷积的三种求法(分治乘法，快速莫比乌斯变换(FMT)，快速沃尔什变换(FWT))

    也许更好的阅读体验 本文主要内容是对武汉市第二中学吕凯风同学的论文<集合幂级数的性质与应用及其快速算法>的理解 定义 集合幂级数 为了更方便的研究集合的卷积,引入集合幂级数的概念 集合幂级 ...

  7. 音视频入门-08-RGB&YUV

    * 音视频入门文章目录 * YUV & RGB 相互转换公式 YCbCr 的 Y 与 YUV 中的 Y 含义一致,Cb 和 Cr 与 UV 同样都指色彩,Cb 指蓝色色度,Cr 指红色色度,在 ...

  8. java-websocket客户端 断线重连 注入Service问题

    java版客户端: 使用开源项目java-websocket, github地址: https://github.com/TooTallNate/Java-WebSocket github上有很多示例 ...

  9. SVN_01概念

    客戶端TortoiseSVN  服务器端VIsualSVN SVN是Apache Subversion的缩写,是一个开放源代码的版本控制系. 这些数据放置在一个中央资料库(repository)中.这 ...

  10. Xcode如何快速定位crash的位置?

    最近发现经常有人程序崩掉后不知道怎么定位crash的位置 如何快速定位crash的位置? 选择右箭头 选择Add Exception Breakpoint 这样如果你的app再crash就会自动定位到 ...