javascript委託程式碼例項

admin發表於2017-04-15
JavaScript

分享一段程式碼例項，它實現了事件委託效果。

所謂的委託，就是自己的事情委託給別人做；將自己的事件處理函式註冊在父元素身上。

原理就是利用事件冒泡現象，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  var ulNode = document.querySelector(".ul-box");
  var oshow = document.querySelector(".antzone");
  ulNode.addEventListener('click', handleClick, false);
  function handleClick(evt) {
    evt.preventDefault();
    var target = evt.target;
    var liNode = target.parentNode.nodeName.toLowerCase() === "li" && target.parentNode || target;
    oshow.innerHTML=liNode.innerHTML;
  }
}
</script>
</head>
<body>
<ul class="ul-box">
  <li><a href="#">螞蟻部落一</a></li>
  <li><a href="#">螞蟻部落二</a></li>
</ul>
<div class="antzone"></div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.window.onload=function(){}，文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var ulNode = document.querySelector(".ul-box")，獲取class屬性值為ul-box的元素物件。

（3）.var oshow = document.querySelector(".antzone"),獲取class屬性值為antzone的元素物件。

（4）.ulNode.addEventListener('click', handleClick, false);，為ulNode註冊click事件處理函式。

（5）.function handleClick(evt) {}，事件處理函式，evt是傳遞的事件物件。

（6）.evt.preventDefault()，阻止預設動作，也就是阻止點選連結的時候跳轉動作。

（7）.var target = evt.target，獲取點選的目標物件。

（8）.var liNode = target.parentNode.nodeName.toLowerCase() === "li" && target.parentNode || target，如果是點選連結a元素，那麼就獲取它的父元素li，如果點選的是li或者ul元素，那麼就直接返回li或者ul元素。

（9）.oshow.innerHTML=liNode.innerHTML，將html內容寫入oshow元素。

二.相關閱讀:

（1）.document.querySelector()可以參閱document.querySelector()一章節。

（2）.addEventListener()可以參閱addEventListener()一章節。

（3）.preventDefault()可以參閱javascript preventDefault()一章節。

（4）.target可以參閱javascript event.target一章節。

（5）.parentNode可以參閱parentNode一章節。

（6）.nodeName可以參閱js nodeName一章節。

（7）.toLowerCase()可以參閱javascript toLowerCase()一章節。

（8）.innerHTML可以參閱innerHTML一章節。

相關文章