【JavaScript】事件委托

前言:阻止事件冒泡,这句话经常听到,也会经常用到。其实事件冒泡也是有用处的,其中一个就是事件委托啦!

一、简单事件绑定例子

<body>
<ul>
	<li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<script>
	var oUl = document.getElementsByTagName('ul')[0];
	var aLi = oUl.getElementsByTagName('li');
	for(var i=0,len= aLi.length; i<len; i++){
		aLi[i].onclick = function(){
			console.log(this.innerText);	
		}	
	}
</script>
</body>

这是一个事件绑定的例子,我用for循环给所有的li都绑定了一个事件,用来输出li标签自身的内容。其实我们可以通过事件冒泡给ul添加事件,从而实现该功能,而不需要通过给每个li都添加事件。(这就是事件委托了)


二、事件委托

<body>
<ul>
	<li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<script>
	var oUl = document.getElementsByTagName('ul')[0];
	
	oUl.onclick = function(ev){
		//window.event 用于兼容IE8及IE8以下
		var ev = ev || window.event;	
		//ev.srcElement 用于兼容IE8及IE8以下
		var target = ev.target || ev.srcElement;
		
		console.log(target.innerText);
	}
</script>
</body>
这样,我们就可以实现跟上面一样的效果了。

猜你喜欢

转载自blog.csdn.net/w390058785/article/details/80017816