前端学习——实现事件代理

事件代理

　　事件代理/委托:顾名思义，自己的事情让别人代做，主要原理是利用事件冒泡，下图

DOM2事件处理又分为三个阶段：一、事件捕获阶段，二、事件目标阶段，三、事件冒泡阶段。详情讲解我会另外开一篇文章

　　　　

<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更新后无须重新绑定事件处理器了。