微信扫一扫打赏支持

js进阶 12-13 jquery中one方法和trigger方法如何使用

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、相关知识


    

  1. one()为每一个匹配元素的特定事件绑定一个一次性的事件处理函数。

    通过one()函数绑定的事件处理函数都是一次性的，只有首次触发事件时会执行该事件处理函数。触发之后，jQuery就会移除当前事件绑定。
    

    2. 

  2. trigger() 在每一个匹配的元素上触发某类事件。
    3. 



 


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>




 


 


 


 


 







		

		
posted @ 
2018-07-10 19:47 
范仁义 
阅读(852) 
评论(0) 
编辑 
收藏 
举报