什么是事件委托？JavaScript事件委托的实现原理

引言：

事件委托应用在很多开发场景之中，但是很多同学对委托的原理、特别是对JS原生实现委托不太了解。每每看到此情此景我总觉得“众生皆苦”，正所谓“我不写文章，谁写文章”的普渡心态，是以提供这篇文章解救众生之苦，阿弥陀佛!

释义

在学事件委托时，我们有必要先对事件委托做一个定义。

JS里的事件委托：就是当事件触发时，把要做的事委托给父元素来处理。

再通俗点：就是自己的事不想干，叫它爸爸，甚至爷爷、甚至祖先来干。

作用

在学它的用法和原理之前，我们先了解一下它的作用，有什么好处。再让各位决定是否愿意继续看下去呢?

作用1：节约内存(哇塞，这个好这个棒!)

作用2：能为之后新增的DOM元素依然添加事件(路人甲：这什么鬼?我：死相，真猴急。往后面看就知道了!)

揭开事件委托面纱

场景1：当多个li标签需要添加点击事件时

代码如图：

代码解析：

给5个li标签加了点击事件，当界面上点击li时，会打印它们各自li标签显示的内容。

出现的问题：

此时5个li，看起来每个li的点击事件触发时调用的都是同一个函数，即：

function(){

    console.log(this.innerHTML);             

};

但其实并不是这样。每个li绑定的都是一个全新的函数，只不过每个函数的样子都一毛一样。

如何验证这个结论呢?很简单，判断每个li标签的onclick是否相等就可以了

代码验证如下：

得到结果：