前端學習——實現事件代理

事件代理

　　事件代理/委託:顧名思義，本身的事情讓別人代作，主要原理是利用事件冒泡，下圖

DOM2事件處理又分爲三個階段：1、事件捕獲階段，2、事件目標階段，3、事件冒泡階段。詳情講解我會另外開一篇文章

　　　　

<ul class='ul-li'>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	...
	<li>1000</li>
</ul>
<script type="text/javascript">
	var lis=document.getElementsByTagName("li");
	        for(var i in lis){
			lis[i].onclick=function(){
				alert(this.innerHTML);
			}
		}
</script>

　　這樣綁定事件不單單是後添加的元素沒法綁定這個事件，並且性能大大的下降，同時也會照成瀏覽器崩潰或者內存泄漏的事情。

 

　　事件代理這時候就很是有用了。它把本來須要綁定的事件委託給父元素，讓父元素擔當事件監聽的職務。它主要利用事件冒泡來實現的，在冒泡過程經過判斷元素是不是咱們須要綁定的。

　　

var aul=document.getElementById("cl");
aul.onclick = function(event) {
    e = event || window.event;
    var eve = e.target || e.srcElement;
    if (eve.nodeName=='LI') {
	 console.log(eve);
    }
};

　　jQuery 有多種方法能夠實現事件代理  .on() .bind() .delegate

　

$(".ul-li").on("li", "click", function(){
  // "$(this)" 指向當前li
  console.log($(this));
});

$(".ul-li li").bind("click", function(){
  // "$(this)" 指向當前li
  console.log($(this));
});

$(".ul-li").delegate("li", "click", function(){
  // "$(this)" 指向當前li
  console.log($(this));
});

 

　事件代理帶來了不少好處：那些須要建立的以及駐留在內存中的事件處理器少了。提升了性能，並下降了瀏覽器崩潰的風險。在DOM更新後無須從新綁定事件處理器了。