JS中的事件委托

引子

其实事件委托就好比你找人帮你写寒假作业，因为寒假作业肯定有很多科嘛，咱就算是语数外三科，

第一种方式：你分别找三个人，一个人帮你写数学，一个帮你写语文，一个帮你写外语

第二种方式： 你找一个靠谱的人，他帮你找人，他帮你找三个人，每个人负责一科

其实就是把你想要干的事给委托出去了，只不过是把所有的事委托给了一个人而已，

1. 前期所需了解背景知识（事件捕获+冒泡阶段）：

看上面的图，我分别给html标签，body标签，section标签，和里面的a标签都添加 click event后，会发现，当我点击 a标签的link后，给前面那些标签添加的事件竟然也都被触发了， 可是明明我只是点击了一个a标签的click 事件啊， 问题就在于浏览器对于事件的捕获背后存在着两个捕获阶段， 一个是先发生的从上到下的捕获叫【事件捕获】， 一个是从下到上的和之前逆序的【冒泡阶段】， 

如果你不确定是不是真的那个标签，可以在添加事件的时候，一并通过e.currentTarget 把当天的元素打印出来，就可以准确的判断了，

同时你也可以控制事件的触发，通过在添加事件的时候，传入第三个参数，true，来让事件处于捕获阶段; 默认不传第三个参数或者传参为false都是冒泡阶段

div.addEventListener("click", fn, true);

 

2. 不委托的例子:

就拿登录后的淘宝首页来举例子

登录后，右上角可以看到几个链接按钮，如果我们不进行事件委托，那么就需要给每个button单独创建一个页面跳转的事件，这里我假设每个button标签的属性里有我要的跳转网页地址等所需的所有信息，这时候，无论我给那个button添加事件，都是要获取标签里面的对应的属性值，然后进行相应的跳转操作，所以函数都是一样的，这时候就有多少个button，我就要重复几次，而这是无意义的，浪费内存，所以我们可以考虑事件委托，将事件绑定在他们的公共父亲元素比如header上，利用事件冒泡阶段或者事件捕获阶段，来进行事件委托，这样一个函数绑定在公共父元素上，就能解决重复的问题

3. 委托后：

一个函数绑定在公共父元素上，就能解决之前重复的问题, 比如下面的这种代码

达到一劳永逸的作用，即使后面追加button，但只要其标签内能含有我们要的数据，属性，就都还能继续这个函数，也不会影响什么，