事件冒泡、事件委託、jQuery元素節點操做、滾輪事件與函數節流

時間 2019-12-14

原文原文鏈接

1、事件冒泡定義

事件冒泡是指在一個對象觸發某類事件（好比單擊onclick事件），若是此對象定義了此事件的處理程序，那麼此事件就會調用這個處理程序，若是沒有定義此事件處理程序或者事件返回true，那麼這個事件會向這個對象的父級對象傳播，從裏到外，甚至它被處理（父級對象全部同類事件都將被激活），或者它到達了對象層級的最頂層，即document對象（有些瀏覽器是window）.。javascript

2、事件冒泡的做用

事件冒泡容許多個操做被集中處理（把事件處理器添加到一個父級元素上，避免把事件處理器添加到多個子級元素上），它還可讓你在對象層的不一樣級別捕獲事件。css

3、阻止事件冒泡

事件冒泡機制有時候是不須要的，須要阻止掉，經過event.stopPropagation（）來阻止html

4、阻止默認行爲

如：阻止右鍵菜單前端

5、合併阻止操做

實際開發中，通常把阻止冒泡和阻止默認行爲合併起來寫，合併寫法以下：java

6、事件委託

事件委託就是利用冒泡的原理，把事件加到父級上，經過判斷事件來源的子集，執行相應的操做，事件委託首先能夠極大減小事件綁定次數，提升性能；其次可讓新加入的子元素也能夠擁有相同的操做。jquery

一、通常綁定事件的寫法：

二、事件委託的寫法：（實際開發中，若是是對大量子元素進行操做時，應該用事件委託的方式，提升性能）

7、取消事件委託

用法：$("委託對象").undelegate()web

8、jQuery元素節點操做

一、建立節點

二、插入節點

　　a、append()和appendTo() 在現存元素的內部，從後面插入元素瀏覽器

　　輸出結果爲：app

　　b、prepend()和prependTo() 在現存元素的內部，從前面插入元素ide

　　輸出結果：

　　c、after()和insertAfter() 在現存元素的外部，從後面插入元素

　　輸出結果：

　　d、before()和insertBefore() 在現存元素的外部，從前面插入元素

　　輸出結果：

三、刪除節點

　　$(selector).remove();

四、to do list（計劃列表）實例

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <link rel="stylesheet" href="../css/reset.css">
  6     <style>
  7        .con{
  8            width:360px;
  9            margin:30px auto;
 10        }
 11        .con > h3{
 12            margin-bottom:15px;
 13        }
 14        .con input{
 15            width:290px;
 16            height:30px;
 17        }
 18        .con button{
 19            width:60px;
 20            height:34px;
 21            border:0;
 22        }
 23         .con ul li{
 24             display: flex;
 25             margin-top:15px;
 26             border-bottom:1px solid #ccc;
 27             justify-content: space-between;
 28         }
 29        .con li p{
 30            /*清除a元素之間的間隙*/
 31            font-size:0;
 32        }
 33         .con li p a{
 34             color:#1b5fdd;
 35             font-size:16px;
 36             margin-left:10px;
 37         }
 38         /*彈框樣式*/
 39         .pop_con{
 40             position:fixed;
 41             top:0;
 42             right:0;
 43             bottom:0;
 44             left:0;
 45             background:#000;
 46             display: none;
 47         }
 48         .pop{
 49             width:400px;
 50             height:220px;
 51             position:absolute;
 52             left:50%;
 53             margin-left:-200px;
 54             top:50%;
 55             margin-top:-150px;
 56             background:#fff;
 57         }
 58         .pop .pop_title{
 59             padding:15px;
 60             display: flex;
 61             justify-content: space-between;
 62         }
 63         .pop .pop_title a{
 64             width:36px;
 65             height:36px;
 66             line-height:36px;
 67             border-radius:50%;
 68             background:#c7254e;
 69             color:#fff;
 70             text-align: center;
 71             position:absolute;
 72             top:-18px;
 73             right:-18px;
 74             transition: all 1s ease;
 75         }
 76         .pop_title h3{
 77             letter-spacing: 2px;
 78             font-weight: normal;
 79         }
 80         .pop_title a:hover{
 81             transform: rotate(360deg);
 82         }
 83         .pop_message{
 84             height:110px;
 85             line-height:110px;
 86             text-align: center;
 87         }
 88        .pop_confirm{
 89            height:36px;
 90            text-align: center;
 91        }
 92         .pop_confirm button{
 93             height:36px;
 94             line-height: 36px;
 95             padding:0 15px;
 96             background: #c7254e;
 97             border:none;
 98             color:#fff;
 99             outline: none;
100         }
101     </style>
102     <script src="../js/jquery-1.12.4.min.js"></script>
103     <script>
104         $(function(){
105             //聲明變量
106             var $input = $("#input");
107             $(".pop").click(function(){
108                 return false;
109             });
110             $(".pop_confirm").click(function(){
111                 $(".pop_con").fadeOut();
112             });
113             $(".close").click(function(){
114                 $(".pop_con").fadeOut();
115             });
116             $(".pop_con").click(function(){
117                 $(this).fadeOut();
118             });
119             //點擊增長按鈕，新增元素
120             $("#add").click(function(){
121                var $inputVal = $input.val();
122                 //若是輸入值爲空，出現彈框提示
123                 if($inputVal == ""){
124                     $(".pop_con").fadeIn();
125                     return false
126                 }
127                 $input.val("");
128                 var $li = $("<li><h3>"+$inputVal+"</h3><p><a class='delete' href='javascript:void(0);'>刪除</a><a class='prev' href='javascript:void(0);'>上移</a><a class='next' href='javascript:void(0);'>下移</a></p></li>");
129                 $("ul").append($li);
130             });
131             //使用事件委託寫在一塊兒，提升性能
132             $("ul").delegate("li a","click",function(){
133                 //首先判斷點擊的是哪一個a
134                 if($(this).attr("class") == "prev"){
135                     //判斷是否存在該元素
136                     if($(this).closest("li").prev().length ==0){
137                         $(".pop_message").html("已到頂部!");
138                         $(".pop_con").fadeIn();
139                         return false
140                     }
141                     $(this).closest("li").prev().before($(this).closest("li"));
142                 }else if($(this).attr("class") == "next"){
143                     if($(this).closest("li").next().length ==0){
144                         $(".pop_message").html("已到底部!");
145                         $(".pop_con").fadeIn();
146                     }
147                     $(this).closest("li").next().after($(this).closest("li"));
148                 }else{
149                     $(this).closest("li").remove();
150                 }
151             })
152         })
153     </script>
154 </head>
155 <body>
156     <div class="con">
157         <h3>To  do  list</h3>
158         <input type="text" id="input">
159         <button id="add">增長</button>
160         <ul class="ul">
161             <li>
162                 <h3>學習html</h3>
163                 <p>
164                     <a href="javascript:void(0);" class="delete">刪除</a>
165                     <a href="javascript:void(0);" class="prev">上移</a>
166                     <a href="javascript:void(0);" class="next">下移</a>
167                 </p>
168             </li>
169             <li>
170                 <h3>學習css</h3>
171                 <p>
172                     <a href="javascript:void(0);" class="delete">刪除</a>
173                     <a href="javascript:void(0);" class="prev">上移</a>
174                     <a href="javascript:void(0);" class="next">下移</a>
175                 </p>
176             </li>
177             <li>
178                 <h3>學習ps</h3>
179                 <p>
180                     <a href="javascript:void(0);" class="delete">刪除</a>
181                     <a href="javascript:void(0);" class="prev">上移</a>
182                     <a href="javascript:void(0);" class="next">下移</a>
183                 </p>
184             </li>
185         </ul>
186     </div>
187     <div class="pop_con">
188         <div class="pop">
189             <div class="pop_title">
190                 <h3>提示信息</h3>
191                 <a href="javascript:void(0);" class="close">X</a>
192             </div>
193             <div class="pop_message">輸入框不能爲空</div>
194             <div class="pop_confirm">
195                 <button>朕知道了</button>
196             </div>
197         </div>
198     </div>
199 </body>
200 </html>

to do list

9、滾輪事件與函數節流

一、jquery.mousewheel插件使用

jquery中沒有滾輪事件，原生js中的鼠標滾輪事件不兼容，可使用jquery的滾輪事件插件jquery.nousewheel.js。

二、函數節流

javascript中有些事件的觸發頻率很是高，好比onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面說的鼠標滾輪事件，在短期內屢次觸發執行綁定的函數能夠巧妙的使用定時器來減小觸發的次數，實現函數節流。

三、整屏滾動實例

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>整屏滾動</title>
  6     <link rel="stylesheet" href="../css/reset.css">
  7     <style>
  8         .page_con{
  9             width:100%;
 10             /*必須是固定定位，不然會有問題*/
 11             position:fixed;
 12             top:0;
 13             left:0;
 14             overflow: hidden;
 15         }
 16         .page{
 17             position:relative;
 18         }
 19         .page .main_con{
 20             width:900px;
 21             height:400px;
 22             position:absolute;
 23             left:50%;
 24             top:50%;
 25             margin-top:-200px;
 26             margin-left:-450px;
 27         }
 28         .page .main_con .left_img{
 29             width:363px;
 30             height:400px;
 31         }
 32         .page .main_con .left_img,.page .main_con .right_img{
 33             opacity: 0;
 34             position: relative;
 35             filter:alpha(opacity = 0);
 36             transition:all 1s ease 300ms;
 37         }
 38         .page .main_con .right_info{
 39             width:500px;
 40             height:300px;
 41         }
 42         .page .main_con .right_info,.page .main_con .left_info{
 43             font-size:20px;
 44             line-height:50px;
 45             color:#666;
 46             text-indent:2em;
 47             text-align:justify;
 48             position:relative;
 49             opacity:0;
 50             filter:alpha(opacity=0);
 51             transition:all 1000ms ease 300ms;
 52         }
 53         .main_con .right_img{
 54             width:522px;
 55             height:400px;
 56             top:-50px;
 57         }
 58 
 59         .main_con .left_info{
 60             width:350px;
 61             height:300px;
 62             bottom:-50px;
 63         }
 64         .main_con .left_img,.main_con .left_info{
 65             left:-50px;
 66         }
 67         .main_con .right_img,.main_con .right_info{
 68             right:-50px;
 69         }
 70         .main_con .center_img{
 71             opacity: 0;
 72             filter:alpha(opacity = 0);
 73             text-align: center;
 74             transition: all 1s ease 300ms;
 75         }
 76         .moving .main_con .left_img,.moving .main_con .left_info,.moving .main_con .center_img{
 77             left:0;
 78             opacity: 1;
 79             filter:alpha(opacity = 100);
 80         }
 81         .moving .main_con .center_img{
 82             transform: scale(0.8);
 83         }
 84         .moving .main_con .right_info,.moving .main_con .right_img{
 85             margin-top:50px;
 86             right:0;
 87             opacity: 1;
 88             filter:alpha(opacity = 100);
 89         }
 90         .moving .main_con .right_img{
 91             /*top:25px;*/
 92         }
 93         .page1{
 94             background:orange;
 95         }
 96 
 97         .page2{
 98             background:lightgreen;
 99         }
100         .page3{
101             background:cyan;
102         }
103         .page4{
104             background:pink;
105         }
106         .page5{
107             background:lightblue;
108         }
109         .points{
110             width:16px;
111             height:176px;
112             position:fixed;
113             top:50%;
114             right:20px;
115             margin-top:-88px;
116         }
117         .points li{
118             width:16px;
119             height:16px;
120             line-height:16px;
121             margin-top:15px;
122             border:1px solid #666;
123             border-radius:50%;
124         }
125         .points li:hover,.points li.active{
126             width:6px;
127             height:6px;
128             cursor: pointer;
129             border:6px solid #fff70c;
130         }
131     </style>
132     <script src="../js/jquery-1.12.4.min.js"></script>
133     <script src="../js/jquery.mousewheel.min.js"></script>
134     <script>
135         $(function(){
136             $(".page1").addClass("moving");
137             var page = $(".page");
138             var len = page.length;
139             var currentPage = 0;
140             var timer = null;
141             //獲取顯示區域的高度
142             var $h = $(window).height();
143             page.css({height:$h});
144             $(window).mousewheel(function(event,dat){
145                 //向下滑dat爲-1,向上滑dat爲1
146                 //清除前面開的定時器，實現函數節流
147                 clearTimeout(timer);
148                 timer = setTimeout(function(){
149                     if(dat == -1){
150                         currentPage++;
151                         if(currentPage>len-1){
152                             //若是大於4的話，就不往下滑
153                             currentPage=len-1;
154                         }
155                     }else{
156                         currentPage--;
157                         //判斷當前所在頁是否小於0，若是小於就不往上滑。
158                         if(currentPage<0){
159                             currentPage=0;
160                         }
161                     }
162                     $(".page").eq(currentPage).addClass("moving").siblings().removeClass("moving");
163                     $("ul li").eq(currentPage).addClass("active").siblings().removeClass("active");
164                     $(".page_con").animate({top:-$h*currentPage},300);
165                 },200);
166 
167             });
168             $(".points").delegate("li","click",function (){
169                 $(".page").eq($(this).index()).addClass("moving").siblings().removeClass("moving");
170                 $(this).addClass("active").siblings().removeClass("active");
171                 currentPage = $(this).index()+1;
172                 //首先判斷下點擊的元素在當前選中的元素的上面仍是下面，若是是在上面的話，top值爲正值，不然爲負值。
173                 if($(this).index()<$(".active").index()){
174                     $(".page_con").animate({top:$h*$(this).index()});
175                 }else{
176                     $(".page_con").animate({top:-$h*$(this).index()});
177                 }
178             })
179         })
180     </script>
181 </head>
182 <body>
183 <div class="page_con">
184     <div class="page page1">
185         <div class="main_con clearfix">
186             <div class="page_img float_left left_img">
187                 <img src="../images/001.png" alt="">
188             </div>
189             <div class="page_content float_right right_info">
190                 Web前端開發是從網頁製做演變而來的，名稱上有很明顯的時代特徵。在互聯網的演化進程中，網頁製做是Web1.0時代的產物，那是網站的主要內容都是靜態的，用戶使用網站的行爲也以瀏覽爲主。
191             </div>
192         </div>
193     </div>
194     <div class="page page2">
195         <div class="main_con clearfix">
196             <div class="page_content float_left left_info">
197                 2005年之後，互聯網進入web2.0時代，各類相似桌面軟件的Web應用大量涌現，網站的前端有此發生了翻天覆地的變化。網頁再也不只是承載單一的文字和圖片，各類富媒體讓網頁的內容更加生動，網頁上的軟件化的交互形式爲用戶提供了更好的使用體驗，這些都是基於前端技術實現的。
198             </div>
199             <div class="page_img float_right right_img">
200                 <img src="../images/002.png" alt="">
201             </div>
202         </div>
203     </div>
204     <div class="page page3">
205         <div class="main_con clearfix">
206             <div class="page_img float_left left_img">
207                 <img src="../images/004.png" alt="">
208             </div>
209             <div class="page_content float_right right_info">
210                 Web前端開發是從網頁製做演變而來的，名稱上有很明顯的時代特徵。在互聯網的演化進程中，網頁製做是Web1.0時代的產物，那是網站的主要內容都是靜態的，用戶使用網站的行爲也以瀏覽爲主。
211             </div>
212         </div>
213     </div>
214     <div class="page page4">
215         <div class="main_con clearfix">
216             <div class="page_content float_left left_info">
217                 2005年之後，互聯網進入web2.0時代，各類相似桌面軟件的Web應用大量涌現，網站的前端有此發生了翻天覆地的變化。網頁再也不只是承載單一的文字和圖片，各類富媒體讓網頁的內容更加生動，網頁上的軟件化的交互形式爲用戶提供了更好的使用體驗，這些都是基於前端技術實現的。
218             </div>
219             <div class="page_img float_right right_img">
220                 <img src="../images/003.png" alt="">
221             </div>
222         </div>
223     </div>
224     <div class="page page5">
225         <div class="main_con">
226             <div class="page_img center_img">
227                 <img src="../images/005.png" alt="">
228             </div>
229         </div>
230     </div>
231 </div>
232 <ul class="points">
233     <li class="active"></li>
234     <li></li>
235     <li></li>
236     <li></li>
237     <li></li>
238 </ul>
239 </body>
240 </html>