事件代理
事件代理/委托:顾名思义,自己的事情让别人代做,主要原理是利用事件冒泡,下图
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更新后无须重新绑定事件处理器了。