码迷,mamicode.com
首页 > 其他好文 > 详细

trigger 和 triggerHandler(),自定义事件

时间:2019-08-11 11:21:43      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:htm   param   function   val   jquer   pre   有用   ready   ||   

  1 trigger 和 triggerHandler(),自定义事件
  2 语法:
  3 $(selector).trigger(event,[param1,param2,...])
  4     1,event  必需。规定指定元素要触发的事件。
  5     2,[param1,param2,...]  可选。传递到事件处理程序的额外参数。
  6 
  7 额外的参数对自定义事件特别有用。
  8 可以使自定义事件(使用 bind() 函数来附加),或者任何标准事件。
  9 ========================
 10 triggerHandler() 方法触发被选元素上指定的事件。
 11 
 12 该方法的返回的是事件处理函数的返回值,而不是具有可链性的 jQuery 对象。此外,如果没有处理程序被触发,则这个方法返回 undefined。
 13 
 14 该方法与 trigger() 方法类似,不同的是 trigger() 也触发事件的默认行为(比如表单提交)。
 15 
 16 triggerHandler() 与 trigger() 方法相比的不同之处:
 17     1,它不会引起事件(比如表单提交)的默认行为,
 18     2,.trigger() 会操作 jQuery 对象匹配的所有元素,而 .triggerHandler() 只影响第一个匹配元素。
 19     3,由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡;如果目标元素不直接处理它们,则不会发生任何事情。
 20 ========================
 21 <html>
 22 <head>
 23     <!-- 这里必须引入jQuery.js否则无法正常运行 -->
 24 <script type="text/javascript" src="js/jquery.js"></script>
 25 <script type="text/javascript">
 26     $(document).ready(function(){
 27       $("input").select(function(){
 28         $("input").after("文本被选中!");
 29       });
 30       $("button").click(function(){
 31         $("input").trigger("select");
 32       });
 33     });
 34 </script>
 35 </head>
 36 <body>
 37 <input type="text" name="FirstName" value="Hello World" />
 38 <br />
 39 <button>激活 input 域的 select 事件</button>
 40 </body>
 41 </html>
 42 =================
 43 <html>
 44 <head>
 45     <!-- 这里必须引入jQuery.js否则无法正常运行 -->
 46 <script type="text/javascript" src="/jquery/jquery.js"></script>
 47 <script type="text/javascript">
 48 $(document).ready(function(){
 49   $("input").select(function(){
 50     $("input").after("文本被选中!");
 51   });
 52   var e = jQuery.Event("select");
 53   $("button").click(function(){
 54     $("input").trigger(e);
 55   });
 56 });
 57 </script>
 58 </head>
 59 <body>
 60 <input type="text" name="FirstName" value="Hello World" />
 61 <br />
 62 <button>激活 input 域的 select 事件</button>
 63 </body>
 64 </html>
 65 ==================
 66 <!DOCTYPE html>
 67 <html lang="en">
 68 <head>
 69     <meta charset="UTF-8">
 70     <title>Document</title>
 71 </head>
 72 <body>
 73     <h2>自定义事件trigger</h2>
 74         <div class="left">
 75             <div><span></span><span>0</span>点击次数</div>
 76             <button>直接点击</button>
 77             <button>通过自定义点击</button>
 78         </div>
 79         <!-- 这里必须引入jQuery.js否则无法正常运行 -->
 80         <script src="js/jquery.js"></script>
 81         <script type="text/javascript">
 82 
 83         //点击更新次数
 84         $("button:first").click(function(event,bottonName) {
 85             bottonName = bottonName || first;
 86             update($("span:first"),$("span:last"),bottonName);
 87         });
 88 
 89         //通过自定义事件调用,更新次数
 90         $("button:last").click(function() {
 91             $("button:first").trigger(click,last);
 92         });
 93 
 94         function update(first,last,bottonName) {
 95             first.text(bottonName);
 96             var n = parseInt(last.text(), 10);
 97             last.text(n + 1);
 98         }
 99         </script>
100 </body>
101 </html>
102 ================
103 <!DOCTYPE html>
104 <html lang="en">
105 <head>
106     <meta charset="UTF-8">
107     <title>Document</title>
108 </head>
109 <body>
110     <h2>自定义事件triggerHandler</h2>
111     <div class="left">
112         <div id="accident">
113             <a>triggerHandler事件</a>
114             <input type="text">
115         </div>
116         <button>事件冒泡,触发浏览器默认聚焦行为</button><br><br>
117         <button>不会冒泡,不触发浏览器默认聚焦行为</button>
118     </div>
119     <!-- 这里必须引入jQuery.js否则无法正常运行 -->
120     <script src="js/jquery.js"></script>
121     <script type="text/javascript">
122 
123         //给input绑定一个聚焦事件
124         $("input").on("focus",function(event,title) {
125             $(this).val(title)
126         });
127 
128         $("#accident").on("click",function() {
129             alert("trigger触发的事件会在 DOM 树中向上冒泡");
130         });
131         //trigger触发focus
132         $("button:first").click(function() {
133             $("a").trigger("click");
134             $("input").trigger("focus");
135         });
136 
137         //triggerHandler触发focus
138         $("button:last").click(function() {
139             $("a").triggerHandler("click");
140             $("input").triggerHandler("focus","没有触发默认聚焦事件");
141         });
142     </script>
143 </body>
144 </html>
145 ==========以下是triggerHandler()方法============
146 <!DOCTYPE html>
147 <html>
148 <head>
149 <meta charset="utf-8"> 
150 <title>菜鸟教程(runoob.com)</title> 
151 <!-- 这里必须引入jQuery.js否则无法正常运行 -->
152 <script src="js/jquery.js"></script>
153 <script>
154 $(document).ready(function(){
155   $("input").select(function(){
156     $("input").after("select 事件触发!");
157   });
158   $("button").click(function(){
159     $("input").triggerHandler("select");
160   });
161 });
162 </script>
163 </head>
164 <body>
165 
166 <input type="text" value="Hello World">
167 <br><br>
168 <button>触发输入框的 select 事件</button>
169 <p>该方法与 trigger() 方法类似,不同的是 trigger() 也触发事件的默认行为(比如表单提交)。</p>
170 
171 </body>
172 </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(),自定义事件

标签:htm   param   function   val   jquer   pre   有用   ready   ||   

原文地址:https://www.cnblogs.com/Knowledge-is-infinite/p/11333961.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!