前台开发事件委托

一.概念

1.事件：HTML DOM使javascript有能力对事件作出反应。比如点击事件，鼠标移入移除事件等。事件通常与函数配合使用，这样就可以通过法师的事件来驱动函数。

2.DOM事件流：事件冒泡流和事件捕获流。参考：https://blog.csdn.net/qq_37413883/article/details/82772472

3.DOM事件模型：捕获，目标，冒泡。

4.事件委托：就是一个事件本来要绑定到某个元素上，然而却绑定到了该元素到的父亲或更高父级元素上，利用事件冒泡原理，触发执行效果。

二.事件委托的有点：

事件委托有两大有点：

1.提高网页性能。

2.通过事件委托添加的事件，对后期动态生成的元素依然有效。

举例：ul下面有三个li，通过循环给每个li添加事件，如果三个li到可以正常触发点击事件了，然后通过js代码在ul里插入（append）两个li节点。
点击所有li，就会发现前面三个li正常触发点击事件，后连新添加的两个li无法触发点击事件。

三.事件委托的使用方法：

给每个ul的li绑定事件，示例如下：

var ul = document.querySelector("ul");

ul.onclick = function(e){
    var e = e || window.event;
    var target = e.target || e.srcElement;

    if(target.nodeName.toLowerCase() === "li"){
        alert("li");
    }
}

从上面代码可以看出，要使用事件委托就要利用event对象。可以看到本来对每个li都要进行事件绑定，现在只用对ul进行事件绑定，减少了对DOM的操作。但是近几年火起来的前端框架angular或者vue，可能淡化了事件委托这个概念。因为如果ul下多个li都是用ng-repeat生成的，一行代码即可。每个li上ng-click绑定方法。但是如果说动态操作添加DOM，就可以看出事件委托的好处。

四.事件委托怎么获取元素下表（索引值）：

var ul = document.querySelector("ul");

ul.onclick = function(e){
    var e = e || window.event,
    target = e.target || e.srcElement;

    if(target === li[i]){
       var li = this.querySelectorAll("li");
       index = Array.prototype.indexOf.call(li,target);
       alert("所点击 li 的下标是：" + index);
    }
}