js事件委託原理簡單介紹

antzone發表於2017-03-22
JS事件

所謂事件委託起始從名字上就很好理解，那就是自己的事件交給別人去做，也就是將事件委託給別人。

先說說它的優點，比如有很多li元素，我們想為每一個li元素註冊一個點選事件，當然你可以挨個元素進行註冊，但是如果100或者更多li元素的話，這絕對是海量工作，但是我們如果利用冒泡原理，將事件委託給li元素的父級元素處理，那麼無論有多少個li元素，都能夠輕鬆搞定了，事件冒泡可以參閱javascript事件冒泡簡單介紹一章節。 

程式碼示例如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
ul{
  list-style:none;
}
</style> 
<script type="text/javascript"> 
window.onload=function(){
  var obox=document.getElementById("box");
  var oshow=document.getElementById("show");
  obox.onclick=function(ev){
    var ev=ev||window.event;
    var target=ev.target||ev.srcElement; 
    oshow.innerHTML=target.innerHTML;
  }
}
</script>
</head> 
<body> 
<div id="show"></div>
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
</ul>
</body> 
</html>

以上程式碼的目的是點選每一個li元素可以獲取li元素中的內容，在上面的程式碼中，我們並沒有給每一個li元素註冊事件處理函式，而是將事件處理函式註冊在li元素的父元素上，利用冒泡原理，讓委託父元素處理點選事件，也無需擔心新增的li元素沒有註冊事件處理函式的問題，比如jquery中的on()就是利用的這個原理。

相關文章