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. 数组模拟循环队列（java实现）

    1.front变量的含义:front就指向队列的第一个元素,也就是说arr[front]就是队列的第一个元素front的初始值=0. 2.rear变量的含义:rear指向队列的最后一个元素的后一个位置 ...

  2. Python 用(无脑 and 有脑)方式解决小练习

    题目:企业发放的奖金根据利润提成. 利润(I)低于或等于10万元时,奖金可提10%: 利润高于10万元,低于20万元时,低于10万元的部分按10%提成, 高于10万元的部分,可提成7.5%:20万到4 ...

  3. 17 SUMIF函数、countif函数、averagif函数

    情景 按买家求他们的消费各是多少. 可以考虑使用分类汇总来做,但这里我们使用函数sumif来做. SUMIF函数 格式:=SUMIF(条件列表,匹配条件,数据区) 该函数这样理解:按照匹配条件,从条件 ...

  4. 2019杭电多校三 C. Yukikaze and Demons (点分治)

    大意: 给定树, 每个点有一个十进制数位, 求有多少条路径组成的十进制数被$k$整除. 点分治, 可以参考CF715C, 转化为求$10^a x+b\equiv 0(mod\space k)$的$x$ ...

  5. Java8新特性 - Java内置的四大核心函数式接口

    Java内置的四大核心函数式接口 Consumer:消费型接口 对类型为T的对象应用操作,包含方法:void accept(T t) public class TestLambda02 { publi ...

  6. 以EntifyFramework DBFirst方式访问SQLite数据库

    前面一直在找EF Code First方式来访问SQLite数据库,后面得出的结论是SQLite不支持 Code First, 虽然有非官方的库SQLite.CodeFirst可以使用,但一直没搞成功 ...

  7. VS2015按钮方法

    protected void btnRoleMemberAdd_Click(object sender ,EventArgs e) { txtEmpID.Text=Coeno.utility.stri ...

  8. sqlserver2008+日志收缩sql语句命令

    USE[master] GO ALTER DATABASE 数据库 SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE 数据库 SET RECOVER ...

  9. interface Part4（接口中的多态）

    使用接口实现多态 需要满足以下两个条件. 定义接口并使用类实现了接口中的成员. 创建接口的实例指向不同的实现类对象. 假设接口名称为 ITest,分别定义两个实现类来实现接口的成员,示例代码如下. i ...

  10. gradle上传jar包到maven公共仓库

    首先这里说的中央仓库 是指的 https://issues.sonatype.org/ 而不是maven私服. 其次是使用gradle上传jar包,maven上传,网上有很多教程,这里不做赘述. 首选 ...