js进阶 12-13 jquery中one方法和trigger方法如何使用
一、总结
一句话总结：
1、one()方法和on()方法的区别是什么？
除了one()只执行一次，其它和on()一模一样，包括事件委托了额外参数等
22 //one()函数绑定的事件处理函数都是一次性的
23 $('#btn1').one('click',function(){
24 //alert('one')
25 $('<div></div>').appendTo($('body'))
26 })
27
28 $('#btn1').one('click',100,function(e){
29 alert(e.data)
30 })
31
32 $(document).one('click','#btn1',100,function(e){
33 alert(e.data)
34 })
2、触发事件是什么意思？
比如你给btn添加一个click事件，你点击的话这个click就执行
如果用trigger的话，你不点击这个事件也执行，相当于trigger给你点击了
并且如果你绑定的是一个自定义事件，除了trigger，你没有办法触发
36 $('#btn1').click(function(){
37 alert('trigger')
38 })
39 //使用trigger触发
40 $('#btn1').trigger('click')
3、trigger触发事件如何使用（监听对象和参数是谁）？
监听对象是要触发事件的对象，参数是事件的类型，用脚指头想就知道应该是这样，因为触发事件就是需要这两个参数，而选择器一般选择的就是监听对象
39 //使用trigger触发
40 $('#btn1').trigger('click')
4、trigger的两种简写方式什么？
链式操作和直接事件名
42 //简写方法1
43 $('#btn1').on('click',function(){
44 alert('trigger')
45 }).trigger('click')
46
47 //简写方法2
48 $('#btn1').on('click',function(){
49 alert('trigger')
50 }).click()
5、trigger的必须使用场景是什么？
绑定自定义事件要触发必须用trigger
52 //自定义事件
53 $(document).on('myEvent',function(){
54 alert('Game Over!')
55 }).trigger('myEvent')
二、jquery中one方法和trigger方法如何使用
1、相关知识
- one()为每一个匹配元素的特定事件绑定一个一次性的事件处理函数。
通过one()函数绑定的事件处理函数都是一次性的，只有首次触发事件时会执行该事件处理函数。触发之后，jQuery就会移除当前事件绑定。
- trigger() 在每一个匹配的元素上触发某类事件。
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 input{width: 100px;height: 30px;} 11 div{width: 50px;height: 50px;border:1px solid green;display: inline-block;margin-left: 15px} 12 </style> 13 </style> 14 </head> 15 <body> 16 <h3>jQuery事件对象</h3> 17 <input id="btn1" type="button" value="事件绑定"><br> 18 <div id="div1"></div> 19 <script type="text/javascript"> 20 $(function(){ 21 /* 22 //one()函数绑定的事件处理函数都是一次性的 23 $('#btn1').one('click',function(){ 24 //alert('one') 25 $('<div></div>').appendTo($('body')) 26 }) 27 28 $('#btn1').one('click',100,function(e){ 29 alert(e.data) 30 }) 31 32 $(document).one('click','#btn1',100,function(e){ 33 alert(e.data) 34 }) 35 36 $('#btn1').click(function(){ 37 alert('trigger') 38 }) 39 //使用trigger触发 40 $('#btn1').trigger('click') 41 42 //简写方法1 43 $('#btn1').on('click',function(){ 44 alert('trigger') 45 }).trigger('click') 46 47 //简写方法2 48 $('#btn1').on('click',function(){ 49 alert('trigger') 50 }).click() 51 */ 52 //自定义事件 53 $(document).on('myEvent',function(){ 54 alert('Game Over!') 55 }).trigger('myEvent') 56 }) 57 </script> 58 </body> 59 </html>