微信扫一扫打赏支持

js进阶 12-14 jquery的事件触发函数是哪两个

js进阶 12-14 jquery的事件触发函数是哪两个

一、总结

一句话总结：trigger和triggerHandler

 

1、trigger传额外参数时候的注意事项是什么？

注意样例中是三个参数

1、传的参数写在trigger的第二个参数
2、如果要传多个参数，用数组方式

31      //trigger的额外数据
32      //多条数据时候需要放到[]中
33       $('#btn1').on('click',
34           300,function(e,data1,data2){
35           alert('trigger: '+data1+','+data2+','+e.data)
36       }).trigger('click',[100,200])

 

2、trigger和triggerHandler的区别是什么？

a、triggerHandler()不会引起事件的默认行为

例如form的跳转事件

43        //区别1:triggerHandler()不会引起事件默认行为
44       // $('#myform').trigger('submit')
45       $('#myform').triggerHandler('submit')

 

b、trigger() 会操作匹配的所有元素，而triggerHandler() 只影响第一个匹配元素。

比如$('div')的时候

47       //区别2：triggerHandler() 只影响第一个匹配元素
48       $('div').click(function(){
49         $(this).css('background','green')
50       }).triggerHandler('click')

 

c、triggerHandler() 创建的事件不会产生事件冒泡.

52      //区别3：triggerHandler() 创建的事件不会产生事件冒泡.
53      $('div').click(function(){
54         alert('div')
55       })
56      $('#div3').triggerHandler('click')

 

d、triggerHandler()返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。如果没有处理程序被触发，则这个方法返回 undefined。

triggerHandler方法的返回值是triggerHandler事件的返回值，而trigger的返回值是jquery对象

58      //区别4： triggerHandler()返回的是事件处理函数的返回值
59      // alert($('#btn1').on('click',function(){
60      //        alert('trigger')
61      //        return '100'
62      //     }).triggerHandler('click'))
63      $('#btn1').on('click',function(){
64             alert('trigger')
65             return '100'
66          }).triggerHandler('click').css('background','red')

 

 

二、jquery的事件触发函数是哪两个

1、相关知识

  1. trigger() 在每一个匹配的元素上触发某类事件。
  2. triggerHandler() 触发被选元素的指定事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡。
    与trigger()区别
    1. triggerHandler()不会引起事件的默认行为
    2. trigger() 会操作匹配的所有元素，而triggerHandler() 只影响第一个匹配元素。
    3. triggerHandler() 创建的事件不会产生事件冒泡.
    4. triggerHandler()返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。如果没有处理程序被触发，则这个方法返回 undefined。
 

 

2、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文档</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style type="text/css">
10     div{border:1px solid green;padding: 20px;float: left;}
11       </style>
12 </style>
13 </head>
14 <body>
15 <h3>jQuery事件对象</h3>
16 <input id="btn1" type="button" value="事件绑定"><br>
17 <!-- <div></div><div></div><div></div> -->
18 <div id="div1">
19     <div id="div2">
20         <div id="div3"></div>
21     </div>
22 </div>
23 <form action="http://www.51_zxw.net/" id="myform">
24   <p>姓名：<input type="text" id="user"></p>
25   <p>密码：<input type="password" id="passw"></p>
26   <input type="submit" value="提交">
27 </form>
28 <script type="text/javascript">
29     $(function(){
30         /*
31      //trigger的额外数据
32      //多条数据时候需要放到[]中
33       $('#btn1').on('click',
34           300,function(e,data1,data2){
35           alert('trigger: '+data1+','+data2+','+e.data)
36       }).trigger('click',[100,200]) 
37       
38        $('#btn1').on('click',function(){
39             alert('trigger')
40          }).triggerHandler('click')
41      
42        //使用trigger()与triggerHandler()的区别
43        //区别1:triggerHandler()不会引起事件默认行为
44       // $('#myform').trigger('submit')
45       $('#myform').triggerHandler('submit')
46       
47       //区别2：triggerHandler() 只影响第一个匹配元素
48       $('div').click(function(){
49         $(this).css('background','green')
50       }).triggerHandler('click')
51     
52      //区别3：triggerHandler() 创建的事件不会产生事件冒泡.
53      $('div').click(function(){
54         alert('div')
55       })
56      $('#div3').triggerHandler('click')
57      */
58      //区别4： triggerHandler()返回的是事件处理函数的返回值
59      // alert($('#btn1').on('click',function(){
60      //        alert('trigger')
61      //        return '100'
62      //     }).triggerHandler('click'))
63      $('#btn1').on('click',function(){
64             alert('trigger')
65             return '100'
66          }).triggerHandler('click').css('background','red')
67 
68     })
69 </script>
70 </body>
71 </html>

 

 

 
posted @ 2018-07-10 22:44  范仁义  阅读(457)  评论(0)  编辑  收藏  举报