【JavaScript】事件委托

最新推荐文章于 2024-08-09 16:54:24 发布

汪小穆

最新推荐文章于 2024-08-09 16:54:24 发布

阅读量334

点赞数

分类专栏： JavaScript 性能优化文章标签：事件委托事件冒泡

本文链接：https://blog.csdn.net/w390058785/article/details/80017816

版权

JavaScript 同时被 2 个专栏收录

33 篇文章 6 订阅

订阅专栏

性能优化

6 篇文章 0 订阅

订阅专栏

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

一、简单事件绑定例子

<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>

这样，我们就可以实现跟上面一样的效果了。