淺談事件冒泡、事件委托、jQuery元素節(jié)點(diǎn)操作、滾輪事件與函數(shù)節(jié)流
更新時(shí)間：2017年07月22日 09:12:37 投稿：jingxian
下面小編就為大家?guī)硪黄獪\談事件冒泡、事件委托、jQuery元素節(jié)點(diǎn)操作、滾輪事件與函數(shù)節(jié)流。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
一、事件冒泡定義
事件冒泡是指在一個(gè)對象觸發(fā)某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程序，那么此事件就會(huì)調(diào)用這個(gè)處理程序，如果沒有定義此事件處理程序或者事件返回true，那么這個(gè)事件會(huì)向這個(gè)對象的父級對象傳播，從里到外，甚至它被處理（父級對象所有同類事件都將被激活），或者它到達(dá)了對象層級的最頂層，即document對象（有些瀏覽器是window）.。
二、事件冒泡的作用
事件冒泡允許多個(gè)操作被集中處理（把事件處理器添加到一個(gè)父級元素上，避免把事件處理器添加到多個(gè)子級元素上），它還可以讓你在對象層的不同級別捕獲事件。
三、阻止事件冒泡
事件冒泡機(jī)制有時(shí)候是不需要的，需要阻止掉，通過event.stopPropagation（）來阻止
四、阻止默認(rèn)行為
如：阻止右鍵菜單
五、合并阻止操作
實(shí)際開發(fā)中，一般把阻止冒泡和阻止默認(rèn)行為合并起來寫，合并寫法如下：
六、事件委托
事件委托就是利用冒泡的原理，把事件加到父級上，通過判斷事件來源的子集，執(zhí)行相應(yīng)的操作，事件委托首先可以極大減少事件綁定次數(shù)，提高性能；其次可以讓新加入的子元素也可以擁有相同的操作。
1、一般綁定事件的寫法：
2、事件委托的寫法：（實(shí)際開發(fā)中，如果是對大量子元素進(jìn)行操作時(shí)，應(yīng)該用事件委托的方式，提高性能）
七、取消事件委托
用法：$("委托對象").undelegate()
八、jQuery元素節(jié)點(diǎn)操作1、創(chuàng)建節(jié)點(diǎn)
2、插入節(jié)點(diǎn)
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é)點(diǎn)
$(selector).remove();
4、to do list（計(jì)劃列表）實(shí)例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/reset.css" rel="external nofollow" rel="external nofollow" >
<style>
.con{
width:360px;
margin:30px auto;
}
.con > h3{
margin-bottom:15px;
}
.con input{
width:290px;
height:30px;
}
.con button{
width:60px;
height:34px;
border:0;
}
.con ul li{
display: flex;
margin-top:15px;
border-bottom:1px solid #ccc;
justify-content: space-between;
}
.con li p{
/*清除a元素之間的間隙*/
font-size:0;
}
.con li p a{
color:#1b5fdd;
font-size:16px;
margin-left:10px;
}
/*彈框樣式*/
.pop_con{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background:#000;
display: none;
}
.pop{
width:400px;
height:220px;
position:absolute;
left:50%;
margin-left:-200px;
top:50%;
margin-top:-150px;
background:#fff;
}
.pop .pop_title{
padding:15px;
display: flex;
justify-content: space-between;
}
.pop .pop_title a{
width:36px;
height:36px;
line-height:36px;
border-radius:50%;
background:#c7254e;
color:#fff;
text-align: center;
position:absolute;
top:-18px;
right:-18px;
transition: all 1s ease;
}
.pop_title h3{
letter-spacing: 2px;
font-weight: normal;
}
.pop_title a:hover{
transform: rotate(360deg);
}
.pop_message{
height:110px;
line-height:110px;
text-align: center;
}
.pop_confirm{
height:36px;
text-align: center;
}
.pop_confirm button{
height:36px;
line-height: 36px;
padding:0 15px;
background: #c7254e;
border:none;
color:#fff;
outline: none;
}
</style>
<script src="../js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
//聲明變量
var $input = $("#input");
$(".pop").click(function(){
return false;
});
$(".pop_confirm").click(function(){
$(".pop_con").fadeOut();
});
$(".close").click(function(){
$(".pop_con").fadeOut();
});
$(".pop_con").click(function(){
$(this).fadeOut();
});
//點(diǎn)擊增加按鈕，新增元素
$("#add").click(function(){
var $inputVal = $input.val();
//如果輸入值為空，出現(xiàn)彈框提示
if($inputVal == ""){
$(".pop_con").fadeIn();
return false
}
$input.val("");
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>");
$("ul").append($li);
});
//使用事件委托寫在一起，提高性能
$("ul").delegate("li a","click",function(){
//首先判斷點(diǎn)擊的是哪個(gè)a
if($(this).attr("class") == "prev"){
//判斷是否存在該元素
if($(this).closest("li").prev().length ==0){
$(".pop_message").html("已到頂部!");
$(".pop_con").fadeIn();
return false
}
$(this).closest("li").prev().before($(this).closest("li"));
}else if($(this).attr("class") == "next"){
if($(this).closest("li").next().length ==0){
$(".pop_message").html("已到底部!");
$(".pop_con").fadeIn();
}
$(this).closest("li").next().after($(this).closest("li"));
}else{
$(this).closest("li").remove();
}
})
})
</script>
</head>
<body>
<div class="con">
<h3>To do list</h3>
<input type="text" id="input">
<button id="add">增加</button>
<ul class="ul">
<li>
<h3>學(xué)習(xí)html</h3>
<p>
<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="delete">刪除</a>
<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="prev">上移</a>
<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="next">下移</a>
</p>
</li>
<li>
<h3>學(xué)習(xí)css</h3>
<p>
<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="delete">刪除</a>
<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="prev">上移</a>
<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="next">下移</a>
</p>
</li>
<li>
<h3>學(xué)習(xí)ps</h3>
<p>
<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="delete">刪除</a>
<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="prev">上移</a>
<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="next">下移</a>
</p>
</li>
</ul>
</div>
<div class="pop_con">
<div class="pop">
<div class="pop_title">
<h3>提示信息</h3>
<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="close">X</a>
</div>
<div class="pop_message">輸入框不能為空</div>
<div class="pop_confirm">
<button>朕知道了</button>
</div>
</div>
</div>
</body>
</html>
九、滾輪事件與函數(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)滾輪事件，在短時(shí)間內(nèi)多次觸發(fā)執(zhí)行綁定的函數(shù)可以巧妙的使用定時(shí)器來減少觸發(fā)的次數(shù)，實(shí)現(xiàn)函數(shù)節(jié)流。
3、整屏滾動(dòng)實(shí)例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>整屏滾動(dòng)</title>
<link rel="stylesheet" href="../css/reset.css" rel="external nofollow" rel="external nofollow" >
<style>
.page_con{
width:100%;
/*必須是固定定位，否則會(huì)有問題*/
position:fixed;
top:0;
left:0;
overflow: hidden;
}
.page{
position:relative;
}
.page .main_con{
width:900px;
height:400px;
position:absolute;
left:50%;
top:50%;
margin-top:-200px;
margin-left:-450px;
}
.page .main_con .left_img{
width:363px;
height:400px;
}
.page .main_con .left_img,.page .main_con .right_img{
opacity: 0;
position: relative;
filter:alpha(opacity = 0);
transition:all 1s ease 300ms;
}
.page .main_con .right_info{
width:500px;
height:300px;
}
.page .main_con .right_info,.page .main_con .left_info{
font-size:20px;
line-height:50px;
color:#666;
text-indent:2em;
text-align:justify;
position:relative;
opacity:0;
filter:alpha(opacity=0);
transition:all 1000ms ease 300ms;
}
.main_con .right_img{
width:522px;
height:400px;
top:-50px;
}
.main_con .left_info{
width:350px;
height:300px;
bottom:-50px;
}
.main_con .left_img,.main_con .left_info{
left:-50px;
}
.main_con .right_img,.main_con .right_info{
right:-50px;
}
.main_con .center_img{
opacity: 0;
filter:alpha(opacity = 0);
text-align: center;
transition: all 1s ease 300ms;
}
.moving .main_con .left_img,.moving .main_con .left_info,.moving .main_con .center_img{
left:0;
opacity: 1;
filter:alpha(opacity = 100);
}
.moving .main_con .center_img{
transform: scale(0.8);
}
.moving .main_con .right_info,.moving .main_con .right_img{
margin-top:50px;
right:0;
opacity: 1;
filter:alpha(opacity = 100);
}
.moving .main_con .right_img{
/*top:25px;*/
}
.page1{
background:orange;
}
.page2{
background:lightgreen;
}
.page3{
background:cyan;
}
.page4{
background:pink;
}
.page5{
background:lightblue;
}
.points{
width:16px;
height:176px;
position:fixed;
top:50%;
right:20px;
margin-top:-88px;
}
.points li{
width:16px;
height:16px;
line-height:16px;
margin-top:15px;
border:1px solid #666;
border-radius:50%;
}
.points li:hover,.points li.active{
width:6px;
height:6px;
cursor: pointer;
border:6px solid #fff70c;
}
</style>
<script src="../js/jquery-1.12.4.min.js"></script>
<script src="../js/jquery.mousewheel.min.js"></script>
<script>
$(function(){
$(".page1").addClass("moving");
var page = $(".page");
var len = page.length;
var currentPage = 0;
var timer = null;
//獲取顯示區(qū)域的高度
var $h = $(window).height();
page.css({height:$h});
$(window).mousewheel(function(event,dat){
//向下滑dat為-1,向上滑dat為1
//清除前面開的定時(shí)器，實(shí)現(xiàn)函數(shù)節(jié)流
clearTimeout(timer);
timer = setTimeout(function(){
if(dat == -1){
currentPage++;
if(currentPage>len-1){
//如果大于4的話，就不往下滑
currentPage=len-1;
}
}else{
currentPage--;
//判斷當(dāng)前所在頁是否小于0，如果小于就不往上滑。
if(currentPage<0){
currentPage=0;
}
}
$(".page").eq(currentPage).addClass("moving").siblings().removeClass("moving");
$("ul li").eq(currentPage).addClass("active").siblings().removeClass("active");
$(".page_con").animate({top:-$h*currentPage},300);
},200);
});
$(".points").delegate("li","click",function (){
$(".page").eq($(this).index()).addClass("moving").siblings().removeClass("moving");
$(this).addClass("active").siblings().removeClass("active");
currentPage = $(this).index()+1;
//首先判斷下點(diǎn)擊的元素在當(dāng)前選中的元素的上面還是下面，如果是在上面的話，top值為正值，否則為負(fù)值。
if($(this).index()<$(".active").index()){
$(".page_con").animate({top:$h*$(this).index()});
}else{
$(".page_con").animate({top:-$h*$(this).index()});
}
})
})
</script>
</head>
<body>
<div class="page_con">
<div class="page page1">
<div class="main_con clearfix">
<div class="page_img float_left left_img">
<img src="../images/001.png" alt="">
</div>
<div class="page_content float_right right_info">
Web前端開發(fā)是從網(wǎng)頁制作演變而來的，名稱上有很明顯的時(shí)代特征。在互聯(lián)網(wǎng)的演化進(jìn)程中，網(wǎng)頁制作是Web1.0時(shí)代的產(chǎn)物，那是網(wǎng)站的主要內(nèi)容都是靜態(tài)的，用戶使用網(wǎng)站的行為也以瀏覽為主。
</div>
</div>
</div>
<div class="page page2">
<div class="main_con clearfix">
<div class="page_content float_left left_info">
2005年以后，互聯(lián)網(wǎng)進(jìn)入web2.0時(shí)代，各種類似桌面軟件的Web應(yīng)用大量涌現(xiàn)，網(wǎng)站的前端有此發(fā)生了翻天覆地的變化。網(wǎng)頁不再只是承載單一的文字和圖片，各種富媒體讓網(wǎng)頁的內(nèi)容更加生動(dòng)，網(wǎng)頁上的軟件化的交互形式為用戶提供了更好的使用體驗(yàn)，這些都是基于前端技術(shù)實(shí)現(xiàn)的。
</div>
<div class="page_img float_right right_img">
<img src="../images/002.png" alt="">
</div>
</div>
</div>
<div class="page page3">
<div class="main_con clearfix">
<div class="page_img float_left left_img">
<img src="../images/004.png" alt="">
</div>
<div class="page_content float_right right_info">
Web前端開發(fā)是從網(wǎng)頁制作演變而來的，名稱上有很明顯的時(shí)代特征。在互聯(lián)網(wǎng)的演化進(jìn)程中，網(wǎng)頁制作是Web1.0時(shí)代的產(chǎn)物，那是網(wǎng)站的主要內(nèi)容都是靜態(tài)的，用戶使用網(wǎng)站的行為也以瀏覽為主。
</div>
</div>
</div>
<div class="page page4">
<div class="main_con clearfix">
<div class="page_content float_left left_info">
2005年以后，互聯(lián)網(wǎng)進(jìn)入web2.0時(shí)代，各種類似桌面軟件的Web應(yīng)用大量涌現(xiàn)，網(wǎng)站的前端有此發(fā)生了翻天覆地的變化。網(wǎng)頁不再只是承載單一的文字和圖片，各種富媒體讓網(wǎng)頁的內(nèi)容更加生動(dòng)，網(wǎng)頁上的軟件化的交互形式為用戶提供了更好的使用體驗(yàn)，這些都是基于前端技術(shù)實(shí)現(xiàn)的。
</div>
<div class="page_img float_right right_img">
<img src="../images/003.png" alt="">
</div>
</div>
</div>
<div class="page page5">
<div class="main_con">
<div class="page_img center_img">
<img src="../images/005.png" alt="">
</div>
</div>
</div>
</div>
<ul class="points">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
以上這篇淺談事件冒泡、事件委托、jQuery元素節(jié)點(diǎn)操作、滾輪事件與函數(shù)節(jié)流就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
javascript（基于jQuery）實(shí)現(xiàn)鼠標(biāo)獲取選中的文字示例【測試可用】
這篇文章主要介紹了javascript（基于jQuery）實(shí)現(xiàn)鼠標(biāo)獲取選中的文字,涉及jQuery響應(yīng)鼠標(biāo)事件及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-10-10
jQuery通過ajax請求php遍歷json數(shù)組到table中的代碼(推薦)
這篇文章主要介紹了jQuery通過ajax請求php遍歷json數(shù)組到table中代碼(推薦)的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
基于JQuery實(shí)現(xiàn)仿網(wǎng)易郵箱全屏動(dòng)感滾動(dòng)插件fullPage
網(wǎng)易郵箱專題頁的效果相信很多朋友都看過，也許有很多朋友想著把自己的網(wǎng)站做成那樣動(dòng)感美妙的全屏滾動(dòng)效果，但苦于技術(shù)有限，只能望而生嘆。此刻您有福了，這款基于jquery的fullpage就可以輕松的幫你實(shí)現(xiàn)動(dòng)感美妙的全屏滾動(dòng)效果，需要的可以參考下2015-09-09
jQuery實(shí)現(xiàn)點(diǎn)擊該行即可刪除HTML表格行
本節(jié)任務(wù)是從一個(gè)HTML表使用一些時(shí)髦的效果，只要按一下該行的行。以下是實(shí)現(xiàn)這一目標(biāo)的jQuery代碼2014-10-10
對jquery只是才涉足，如有不適合，請各位多多指教。2011-07-07
本文簡單介紹了jQuery對象初始化傳參方式，以及具體的示例，是篇非常不錯(cuò)的文章，這里推薦給小伙伴們。2015-02-02
easyui是一種基于jQuery的用戶界面插件集合，easyui為創(chuàng)建現(xiàn)代化，互動(dòng)，JavaScript應(yīng)用程序，提供必要的功能，本篇文章給大家整理有關(guān)jquery Easyui快速開發(fā)的技巧，需要的朋友可以參考下2015-08-08
jquery實(shí)現(xiàn)先淡出再折疊收起的動(dòng)畫效果
這篇文章主要介紹了jquery實(shí)現(xiàn)先淡出再折疊收起的動(dòng)畫效果,通過jquery鏈?zhǔn)讲僮鲗?shí)現(xiàn)頁面元素的漸變折疊與展開功能,非常簡單實(shí)用,需要的朋友可以參考下2015-08-08
基于jquery.page.js實(shí)現(xiàn)分頁效果
這篇文章主要為大家詳細(xì)介紹了基于jquery.page.js實(shí)現(xiàn)的分頁效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
jQuery實(shí)現(xiàn)淡入淡出二級下拉導(dǎo)航菜單的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)淡入淡出二級下拉導(dǎo)航菜單的方法,涉及jquery簡單操作頁面元素展開與隱藏的實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08