js事件委托有的说法也叫事件代理。它可以让我们添加监听器到父元素上，来避免监听每个子元素。下面我们通过一个简单的例子来说明js事件委托。

实现原理：js中事件冒泡我们知道，子元素身上的事件会冒泡到父元素身上。事件委托就是，本来加在子元素身上的事件，加在了其父级身上。父级那么多子元素，怎么区分事件本应该是哪个子元素的？答案是event对象里记录的有“事件源”，它就是发生事件的子元素。它存在兼容性问题，在老的IE下，事件源是 window.event.srcElement，其他浏览器是 event.target。

现在一个列表里有几千个子元素，我们想要鼠标移动到一个子元素上将其背景变为灰色。

<div id="container">
	<ul id="list">
		<li>item1</li>
		<li>item2</li>
		<li>item3</li>
		<li>item4</li>
		................
		<li>item2000</li>
	</ul>
</div>
<script>
	var lis = document.getElementsByTagName('li');
	for (var i = 0; i < lis.length; i++) {
		lis[i].onmouseover = function() {
			this.style.background = 'gray';
		}
		lis[i].onmouseout = function() {
			this.style.background = '';
		}
	}
</script>

我们可以通过遍历li元素，然后给每个元素添加鼠标滑动事件修改背景色。这种方法当li元素较少时不会有什么问题，但是元素如果很多就会使页面变得很卡。

现在换一种方式，把鼠标移动事件作用到ul上，然后使用 event.target来检查是哪个元素被获得事件。

// 事件委托，将鼠标移动事件作用到li的父元素ul上
var ule = document.getElementsByTagName('ul')[0];
ule.onmouseover = function(ev) {
	var ev = ev || window.event;	// 兼容IE浏览器
	var uli = ev.srcElement || ev.target;
	// 判断事件源是不是li，如果是才修改背景。如果不做判断，当移动到ul上时也会修改背景
	if (uli.nodeName.toLowerCase() == 'li') {
		uli.style.background = 'gray';
	}
}
ule.onmouseout = function(ev) {
	var ev = ev || window.event;	// 兼容IE浏览器
	var uli = ev.srcElement || ev.target;
	if (uli.nodeName.toLowerCase() == 'li') {
		uli.style.background = '';
	}
}

现在通过监听li的父元素，然后通过获得事件的target属性操作元素背景。但是这样会发现还是有一个问题，当鼠标移动到ul上时会使整个ul背景修改掉。因此需要加一个判断nodeName时li时才修改背景色。

事件委托有哪些优点：

1. 效率高，不用for循环为子元素添加事件了

2. js新生成的子元素也不用新为其添加事件了，程序逻辑上比较方便

对于第二个优点我们遇到的应该比较多，例如当我们需要在ul中动态添加几个li时，如果用传统的方法，for循环为li添加事件，问题就出现了，最开始有的li是有onmouseover和onmouseout事件的，但是后来动态生成的li里没有这两个事件处理函数，因为for循环的时候它还没生成。只能再生成li后再绑定事件，真是麻烦的很。而事件委托的方式就没事，当后来动态生成的li出现的时候，不用做改变，移到它身上，还是变色的，因为事件是绑定在ul身上的。

原文来自：https://mounui.com/663.html

本文地址：https://www.linuxprobe.com/js-event-delegation.html编辑：薛鹏旭，审核员：逄增宝

Linux命令大全：https://www.linuxcool.com/

Linux系统大全：https://www.linuxdown.com/

红帽认证RHCE考试心得：https://www.rhce.net/