事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
生活随笔
收集整理的這篇文章主要介紹了
事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
一、事件冒泡定義
事件冒泡是指在一個對象觸發(fā)某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程序，那么此事件就會調(diào)用這個處理程序，如果沒有定義此事件處理程序或者事件返回true，那么這個事件會向這個對象的父級對象傳播，從里到外，甚至它被處理（父級對象所有同類事件都將被激活），或者它到達(dá)了對象層級的最頂層，即document對象（有些瀏覽器是window）.。
二、事件冒泡的作用
事件冒泡允許多個操作被集中處理（把事件處理器添加到一個父級元素上，避免把事件處理器添加到多個子級元素上），它還可以讓你在對象層的不同級別捕獲事件。
三、阻止事件冒泡
事件冒泡機(jī)制有時候是不需要的，需要阻止掉，通過event.stopPropagation（）來阻止
?
四、阻止默認(rèn)行為
如：阻止右鍵菜單
五、合并阻止操作
實際開發(fā)中，一般把阻止冒泡和阻止默認(rèn)行為合并起來寫，合并寫法如下：
六、事件委托
事件委托就是利用冒泡的原理，把事件加到父級上，通過判斷事件來源的子集，執(zhí)行相應(yīng)的操作，事件委托首先可以極大減少事件綁定次數(shù)，提高性能；其次可以讓新加入的子元素也可以擁有相同的操作。
?1、一般綁定事件的寫法：
2、事件委托的寫法：（實際開發(fā)中，如果是對大量子元素進(jìn)行操作時，應(yīng)該用事件委托的方式，提高性能）
七、取消事件委托
用法：$("委托對象").undelegate()
八、jQuery元素節(jié)點操作
1、創(chuàng)建節(jié)點
2、插入節(jié)點
a、append()和appendTo() ? 在現(xiàn)存元素的內(nèi)部，從后面插入元素
輸出結(jié)果為：
b、prepend()和prependTo() ? 在現(xiàn)存元素的內(nèi)部，從前面插入元素
?
輸出結(jié)果：
c、after()和insertAfter() ?在現(xiàn)存元素的外部，從后面插入元素
輸出結(jié)果：
d、before()和insertBefore() 在現(xiàn)存元素的外部，從前面插入元素
輸出結(jié)果：
3、刪除節(jié)點
$(selector).remove();
?4、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 //如果輸入值為空，出現(xiàn)彈框提示 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>學(xué)習(xí)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>學(xué)習(xí)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>學(xué)習(xí)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九、滾輪事件與函數(shù)節(jié)流
1、jquery.mousewheel插件使用
jquery中沒有滾輪事件，原生js中的鼠標(biāo)滾輪事件不兼容，可以使用jquery的滾輪事件插件jquery.nousewheel.js。
2、函數(shù)節(jié)流
javascript中有些事件的觸發(fā)頻率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面說的鼠標(biāo)滾輪事件，在短時間內(nèi)多次觸發(fā)執(zhí)行綁定的函數(shù)可以巧妙的使用定時器來減少觸發(fā)的次數(shù)，實現(xiàn)函數(shù)節(jié)流。
3、整屏滾動實例
?
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 //獲取顯示區(qū)域的高度 142 var $h = $(window).height(); 143 page.css({height:$h}); 144 $(window).mousewheel(function(event,dat){ 145 //向下滑dat為-1,向上滑dat為1 146 //清除前面開的定時器，實現(xiàn)函數(shù)節(jié)流 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 //判斷當(dāng)前所在頁是否小于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 //首先判斷下點擊的元素在當(dāng)前選中的元素的上面還是下面，如果是在上面的話，top值為正值，否則為負(fù)值。 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前端開發(fā)是從網(wǎng)頁制作演變而來的，名稱上有很明顯的時代特征。在互聯(lián)網(wǎng)的演化進(jìn)程中，網(wǎng)頁制作是Web1.0時代的產(chǎn)物，那是網(wǎng)站的主要內(nèi)容都是靜態(tài)的，用戶使用網(wǎng)站的行為也以瀏覽為主。 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年以后，互聯(lián)網(wǎng)進(jìn)入web2.0時代，各種類似桌面軟件的Web應(yīng)用大量涌現(xiàn)，網(wǎng)站的前端有此發(fā)生了翻天覆地的變化。網(wǎng)頁不再只是承載單一的文字和圖片，各種富媒體讓網(wǎng)頁的內(nèi)容更加生動，網(wǎng)頁上的軟件化的交互形式為用戶提供了更好的使用體驗，這些都是基于前端技術(shù)實現(xiàn)的。 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前端開發(fā)是從網(wǎng)頁制作演變而來的，名稱上有很明顯的時代特征。在互聯(lián)網(wǎng)的演化進(jìn)程中，網(wǎng)頁制作是Web1.0時代的產(chǎn)物，那是網(wǎng)站的主要內(nèi)容都是靜態(tài)的，用戶使用網(wǎng)站的行為也以瀏覽為主。 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年以后，互聯(lián)網(wǎng)進(jìn)入web2.0時代，各種類似桌面軟件的Web應(yīng)用大量涌現(xiàn)，網(wǎng)站的前端有此發(fā)生了翻天覆地的變化。網(wǎng)頁不再只是承載單一的文字和圖片，各種富媒體讓網(wǎng)頁的內(nèi)容更加生動，網(wǎng)頁上的軟件化的交互形式為用戶提供了更好的使用體驗，這些都是基于前端技術(shù)實現(xiàn)的。 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> 整屏滾動?
轉(zhuǎn)載于:https://www.cnblogs.com/qijunjun/p/7215426.html
總結(jié)
以上是生活随笔為你收集整理的事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数位dp模板 [dp][数位dp]
- 下一篇： 抽象类、抽象方法与代码块