js進階 12-13 jquery中one方法和trigger方法如何使用

時間 2020-05-31

標籤進階 jquery 方法 trigger 如何使用欄目 JavaScript 简体版

原文原文鏈接

js進階 12-13 jquery中one方法和trigger方法如何使用

1、總結

一句話總結：

一、one()方法和on()方法的區別是什麼？

除了one()只執行一次，其它和on()如出一轍，包括事件委託了額外參數等javascript

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  })

二、觸發事件是什麼意思？

好比你給btn添加一個click事件，你點擊的話這個click就執行
若是用trigger的話，你不點擊這個事件也執行，至關於trigger給你點擊了css

而且若是你綁定的是一個自定義事件，除了trigger，你沒有辦法觸發html

36  $('#btn1').click(function(){ 37  alert('trigger') 38  }) 39  //使用trigger觸發 40  $('#btn1').trigger('click')

三、trigger觸發事件如何使用（監聽對象和參數是誰）？

監聽對象是要觸發事件的對象，參數是事件的類型，用腳指頭想就知道應該是這樣，由於觸發事件就是須要這兩個參數，而選擇器通常選擇的就是監聽對象java

39  //使用trigger觸發 40  $('#btn1').trigger('click')

四、trigger的兩種簡寫方式什麼？

鏈式操做和直接事件名jquery

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()

五、trigger的必須使用場景是什麼？

綁定自定義事件要觸發必須用triggerapp

52 //自定義事件 53  $(document).on('myEvent',function(){ 54  alert('Game Over!') 55  }).trigger('myEvent')

2、jquery中one方法和trigger方法如何使用

一、相關知識

one()爲每個匹配元素的特定事件綁定一個一次性的事件處理函數。
經過one()函數綁定的事件處理函數都是一次性的，只有首次觸發事件時會執行該事件處理函數。觸發以後，jQuery就會移除當前事件綁定。函數
trigger() 在每個匹配的元素上觸發某類事件。

二、代碼

 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>