溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
事件委托
聲明：這一篇文章只是闡述了委托事件的原理和用委托的好處還有就是在什么時候要委托合適.在這里用的是on()和off()而對于委托的其他方法(delegate()、live()等)和各個方法的比較在這里并沒有詳細闡述,以后如果有機會在發一篇
1.什么是委托呢？
a)定義：把一件事交給別人代做就叫做委托
b)問題：為什么要把事交給別人來做呢？
原因很簡單：第一、自己不想做,所以交給別人 第二、自己不會做,所以交給別人來做 第三、讓別人來做這一件事更有優勢等等(這也是為什么要使用委托的原因)
c)為了方便理解舉個簡單例子(轉載：http://www.cnblogs.com/secying/archive/2012/03/22/2411780.html)：有三個同事預計會在周一收到快遞。為簽收快遞，有兩種辦法：一是三個人在公司門口等快遞；二是委托給前臺MM代為簽收。現實當中，我們大都采用委托的方案（公司也不會容忍那么多員工站在門口就為了等快遞）。前臺收到快遞后，她會判斷收件人是誰，然后按照收件人的要求簽收，甚至代為付款。這種方案還有一個優勢，那就是即使公司里來了新員工（不管多少），前臺也會在收到寄給新員工的快遞后核實并代為簽收(即讓前臺來做這件事更具優勢)。 這個樣子理解就比較容易懂了
2.那事件委托呢(至于什么是事件就不再這里闡述,不懂的朋友請自己谷歌)？如果將事件比作是一件要做的事,那么事件委托即將事件這件事交個別人來做,而在js里面就是將一個事件交給別的元素代勞
3.Jquery是怎么具體實現事件委托？
a)事件委托的例子,看下面代碼：
<head>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<scrpty type="text/JavaScript">
$(function(){
//將span的單擊事件委托給div
$('div').on('click','span',function(e){alert("this is span label");});
//單擊span標簽-執行結果彈出 this is span label
});
</scrpty>
</head>
<body>
<div>
<span id="span">hello</span>
<input type="text" >
</div>
</body>
分析以上的代碼其實click事件是綁定在div這個元素上的,所以按道理點擊div這個事件是會觸發的,但事實是不會.讓我們來分析一下原因(委托實現的原理)：
第一、委托的事件是以冒泡的形式向外傳播的所以只要點擊div的子元素都會觸發委托的事件
第二、當事件傳播到被委托元素(這里指div)的時候會首先判斷e.type和e.target這兩個屬性.
綜合以上兩點只有點擊委托事件的元素(這里指span)才會觸發綁定在div元素上的單擊事件
b)分析以下一種情況,將以上js代碼改成：
<scrpty type="text/JavaScript">
//只是為span標簽綁定單擊事件
$('span').on('click',function(e){alert("this is span label");});
//動態增加10個span標簽
for(var i=0;i<10;i++){
$('.div').append($('<span>span1</span><br />'));
}
</scrpty>
在這種情況下只有id為span的標簽綁定了單擊事件,而后面動態增加的span標簽確沒有,
在這種情況下怎么為后續的span標簽添加事件呢？在添加span標簽代碼的后面加上 $('span').on('click',function(e){});是不是很簡單呢？既然可以這樣寫那么委托有存在
的必要嗎？
根據以上的第一點可知：委托的事件是綁定在一個以存在的元素上的,所以他只綁定一次,而$('span').on('click',function(e){});這段代碼是為每一個span元素綁定一次,
就是說如果有200個span元素就要綁定兩百次,增加的代碼的冗余和降低了性能,所以委托不僅增強了性能而且增加了代碼的可讀性.
總結：一、為了給動態生成的元素增加事件時用委托 二、如果是一次性要給很多個相同的元素綁定事件時用委托 好處：增強性能和代碼可讀性
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
