JavaScript与jQuery事件委托的写法

阅读() @2018-10-29 18:16:06

JavaScript中的事件委托的定义:

什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。

也就是:利用冒泡的原理,把事件加到父级上,触发执行效果。

事件委托优势1:提高性能。

我们可以看一个例子:需要触发每个li来改变他们的背景颜色。

html部分:

<ul class="list">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

按照正常的写法,我们需要用for循环来遍历每个li,然后相应的添加事件。

var aUl = document.getElementsByClassName("list")[0];
var aLi = aUl.getElementsByTagName("li");
for(var i=0; i<aLi.length; i++){
		aLi[i].onclick = function(){
			this.style.backgroundColor = "red";
		}
}

如果li元素有很多,这个时候用for循环就会降低系统的性能,可能自己电脑的风扇都会呼呼响。利用事件委托可以解决这个问题。

原生JavaScript的事件委托:

var aUl = document.getElementsByClassName("list")[0];
var aLi = aUl.getElementsByTagName("li");
aUl.onclick = function(ev){
/*这里要用到事件源:event 对象,事件源,不管在哪个事件中,只要你操作的那个元素就是事件源。
       ie:window.event.srcElement
       标准下:event.target
        nodeName:找到元素的标签名
*/
	var ev = ev || window.event;
	var target = ev.target || ev.srcElement;
	if(target.nodeName.toLowerCase()=="li"){
		target.style.backgroundColor = "red";
	}
}

jQuery的事件委托写法:

$(".list").on("click","li",function(){
	$(this).css("background","red");
})

更加简单方便。

事件委托优势2:新添加的元素还会有之前的事件。

生成新的li元素:

function create(){
	var oLi = document.createElement("li");
	$(".list li").each(function(i){
		oLi.innerHTML = $(this).index()+1;
	})
	return oLi;
}
$("#btn1").click(function(){
	$(".list").append(create());
})

如果不用事件委托,那么新生成的li被点击的时候,背景颜色不会有任何的变化:

如果用事件委托,那么新生成的元素被点击的时候,背景颜色也会变红!

微信二维码