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. Nginx08---腾讯云宝塔面板

    主要在宝塔面板中Nginx和Apache不可同时存在 宝塔可以快速搭建网站并且配置 与nginx不冲突:nginx nginx

  2. go 食用指南

    Golang高效食用秘籍 一.关于构建 1.1 go环境变量 $ go env // 查看go 的环境变量 其中 GOROOT 是golang 的安装路径 GOPATH 是go命令依赖的一个环境变量 ...

  3. Python3遍历指定文件夹下所有文件及文件夹

    采用os模块儿: import os def get_filelist(dir): for home, dirs, files in os.walk(dir): print("####### ...

  4. 数据结构-链式队列-C++

    用链表搭建的栈与队列相对简单,队列的特点是先进先出,不啰嗦了,由于代码比较简单,相信光顾的人不会太多,下面直接贴代码. 头文件 #ifndef QUEUELI_H #define QUEUELI_H ...

  5. Linux文件和目录相关的命令

    当前目录 .     上一层目录 ..     tab键 自动补全             查看目录内容 ls 以.开头的都是隐藏文件需要用-a才能显示出来 ls通配符的使用 * 代表任意个数个字符 ...

  6. 全栈项目|小书架|服务器开发-NodeJS 项目分包

    唠嗑 参考的是慕课网七月老师的课程,七月的课质量真的挺高的,推荐一波.这次的小书架项目源码不会全部公开,因为用了七月老师课程的绝大部分代码.虽然代码不全,但是只要思路看得懂,代码实现就很简单了. 小书 ...

  7. SQL Server存储过程中字符串前加N的含义

    使用方法: N'字符串' 解释: 意思为后面的数据类型为NChar或者NVarchar 使用N前缀 在服务器上执行的代码中(例如在存储过程和触发器中)显示的Unicode字符串常量必须以大写字母N为前 ...

  8. 数据备份 及 Python 操作 Mysql

    一 MySQL数据备份 #1. 物理备份: 直接复制数据库文件,适用于大型数据库环境.但不能恢复到异构系统中如Windows. #2. 逻辑备份: 备份的是建表.建库.插入等操作所执行SQL语句,适用 ...

  9. 基于【 springBoot +springCloud+vue 项目】一 || 项目架构简介

    一.前言 基于前期学习以及工作经验积累,持续更新基于springboot+springcloud+vue的demo项目.

  10. Map和TreeMap的特点

    Map的特点: 将键映射到值的对象 一个映射不能包含重复的键 每个键最多只能映射到一个值 TreeMap的特点: 无序,不允许重复(无序指元素顺序与添加顺序不一致) TreeMap集合默认会对键进行排 ...