JQuery事件

時間 2019-12-09

標籤 jquery 事件欄目 JQuery 简体版

原文原文鏈接

(1)bind & unbindcss

 1 <html lang="en">
 2  <head>
 3   <meta charset="UTF-8">
 4   <style>
 5 
 6   </style>
 7  </head>
 8  <body>
 9   
10   <button>加載更多</button>
11 
12   <script src="js/jquery-1.11.3.js"></script>
13   <script>
14   $('button').bind('click',function(){
15     console.log('按鈕被點擊了');
16     $(this).html('加載中...');
17     $(this).unbind('click');
18   });
19   //$('button').unbind('click');
20   console.log('代碼執行完成');
21   </script>
22  </body>
23 </html>

(2)onehtml

 1 <html lang="en">
 2  <head>
 3   <meta charset="UTF-8">
 4   <style>
 5 
 6   </style>
 7  </head>
 8  <body>
 9   
10   <button>加載更多</button>
11 
12   <script src="js/jquery-1.11.3.js"></script>
13   <script>
14   $('button').one('click',function(){
15     console.log('按鈕被點擊了');
16     $(this).html('加載中...');
17   });
18   </script>
19  </body>
20 </html>

(3)bind簡化版本 bind('mouseenter',fn) => mouseenter(fn)jquery

前面三類函數的共同問題：1)每一個事件源都要綁定一次監聽函數；2)綁定過程只對當前已經存在的元素有效。——解決辦法：利用事件冒泡機制，把子元素的事件委託給父元素面試

(4)delegate和undelegateapp

undelegate取消代理 $('div.container').undelegate('span'）dom

 1 <html lang="en">
 2  <head>
 3   <meta charset="UTF-8">
 4   <style>
 5     .box{
 6         width:30px;
 7         height:30px;
 8         cursor:pointer;
 9     }
10   </style>
11  </head>
12  <body>
13   
14   <button>添加一個隨機色塊</button>
15   <br><br>
16   <div class="container">
17    
18   </div>
19 
20 
21   <script src="js/jquery-1.11.3.js"></script>
22   <script>
23     $('div.container').delegate('span','click',function(){
24         $(this).parent().remove();
25     });
26     $('button').click(function(){
27         var $span =$('<span>&times</span>');
28         /*$span.click(function(){
29             console.log($(this).parent());
30             $(this).parent().remove();;
31         });
32         */
33         var $div =$('<div class="box"></div>');
34         var r = 10+parseInt(Math.random()*90);
35         var g = 10+parseInt(Math.random()*90);
36         var d = 10+parseInt(Math.random()*90);
37         
38         $div.css('background-color','#'+r+""+g+""+d);
39         //$div.css('background-color','#ddd');
40         $div.append($span);
41         $('.container').append($div);
42         
43     });
44   </script>
45  </body>
46 </html>

(5)live & die函數

做用：把全部子元素的事件委託給document對象，此方法已廢棄this

(6)on & offspa

on能夠取代前面全部的方法！代理

　　用法1：把監聽函數直接綁定事件源上

　　　　$('button').on('click', fn) //bind/click

　　用法2：把監聽函數委託給父元素

　　　　$('div.parent').on('click', 'button', fn) //delegate

 1 <html lang="en">
 2  <head>
 3   <meta charset="UTF-8">
 4   <style>
 5     .box{
 6         display:block;
 7         width:50px;
 8         height:50px;
 9         cursor:pointer;
10     }
11   </style>
12  </head>
13  <body>
14   
15   <button>添加一個隨機色塊</button>
16   <br><br>
17   <div class="container">
18    
19   </div>
20 
21 
22   <script src="js/jquery-1.11.3.js"></script>
23   <script>
24     /*$('div.container').delegate('span','click',function(){
25         $(this).parent().remove();
26     });
27     $('button').click(function(){
28         var $span =$('<span>&times</span>');
29         $span.click(function(){
30             console.log($(this).parent());
31             $(this).parent().remove();;
32         });
33         
34         var $div =$('<div class="box"></div>');
35         var r = 10+parseInt(Math.random()*90);
36         var g = 10+parseInt(Math.random()*90);
37         var d = 10+parseInt(Math.random()*90);
38         
39         $div.css('background-color','#'+r+""+g+""+d);
40         //$div.css('background-color','#ddd');
41         $div.append($span);
42         $('.container').append($div);
43         
44     });
45     */
46     $('button').on('click',function(){
47         var $span = $('<span class="box">&times</span>');
48         
49         var r = 10+parseInt(Math.random()*90);
50         var g = 10+parseInt(Math.random()*90);
51         var d = 10+parseInt(Math.random()*90);
52         
53         $span.css('background-color','#'+r+""+g+""+d);
54         $('.container').append($span);
55     });
56     $('.container').on('click','span',function(){
57         //console.log($(this));
58         $(this).remove();
59     });
60   </script>
61  </body>
62 </html>

(7)ready

面試題： window.onload和$(document).ready()的區別？

兩者表示的事件都在「頁面加載完成」後執行。

區別：

(1) $(document).ready()底層的JS實現爲：

　　　　document.addEventListener('DOMContentLoaded', fn, false);

(2)load事件和DOMContentLoaded事件的區別：

　　　　load：待HTML、JS、CSS、圖片等全部的頁面資源加載完成時觸發

　　　　DOMContentLoaded：待DOM內容(HTML、JS)加載完成時觸發，不等待CSS、圖片等資源的加載

　　　　$(document).ready()事件觸發時機要早於window.onload

(3) $(document).ready()能夠前後綁定屢次；window.onload只能綁定一次

(4) $(document).ready(fn)能夠簡寫爲：

$().ready(fn) 或者 $( fn )

 1 <html lang="en">
 2  <head>
 3   <meta charset="UTF-8">
 4   <script src="js/jquery-1.11.3.js"></script>
 5   <script>
 6     window.onload = function(){
 7       console.log('window.onload 1....');
 8     }
 9     window.onload = function(){
10       console.log('window.onload 2....');
11     }
12     $(document).ready(function(){
13       console.log('document.ready 1....');
14     });
15     $(document).ready(function(){
16       console.log('document.ready 2....');
17     });
18     $().ready(function(){
19       console.log('document.ready 3....');
20     });
21     $(function(){
22       console.log('document.ready 4....');
23     })
24   </script>
25  </head>
26  <body>
27 
28   <script>
29     console.log('頁面處理完成');
30   </script>
31  </body>
32 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。