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、相关知识
- trigger() 在每一个匹配的元素上触发某类事件。
- triggerHandler() 触发被选元素的指定事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡。
与trigger()区别
- triggerHandler()不会引起事件的默认行为
- trigger() 会操作匹配的所有元素，而triggerHandler() 只影响第一个匹配元素。
- triggerHandler() 创建的事件不会产生事件冒泡.
- 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>