概念

1、事件：点击事件，鼠标移入移出事件等。通常与函数配合，当发生这个事件时，会触发函数。
2、DOM事件流：事件捕获和事件冒泡
      DOM模型是一个树型的结构，HTML元素是有层次的。
      当HTML上的某个元素产生一个事件时，这个事件就会在DOM树中按照一定的顺序传播，途中所经过的各个节点都会接收到该事件。这个传播的过程就是DOM事件流。
3、DOM事件模型：事件捕获，处于目标阶段，事件冒泡
4、冒泡事件流：
  默认情况下，事件使用的是冒泡事件流。当某个元素被触发时，这个事件就会沿着该节点的各个父节点一直冒泡，在各个阶段都可以终止冒泡。如果不在途中停止冒泡，就会一直冒泡到文档的根部。
5、捕获事件流：
  和冒泡相反，在捕获事件流中，事件的处理是从根部开始的，事件会从这个元素最祖先的元素一直往下传递。
6、DOM标准事件流模型：
  DOM标准事件流同时支持事件冒泡和事件捕获。
  先捕获
  捕获和冒泡都会触发所有对象，从document开始，再到document结束。
  window->document->body->div->button->div->body->document->window
7、事件传导的三个阶段：
  1、事件捕获：事件会沿着目标元素的祖先元素向下传递，经过目标节点的每一个祖先节点，一直到目标节点。
      看看有没有设置成捕获阶段的，addEventListener(,,true)，如果有就先触发了，不用管冒泡(false)的那些
  2、处于目标阶段：事件传到到目标元素，浏览器查找到指定给目标元素的监听器，就会执行该监听器。
      目标元素触发
  3、事件冒泡：事件沿着DOM树向上传送，直到document节点，浏览器会检测监听器（捕获阶段的就不看了）并执行。
      看看设置成冒泡的，addEventListener(,, false)，一层层向上触发，这时候不用管捕获(true)的那些了

  先捕获，捕获到事件源之后通过事件传播进行事件冒泡。
  IE10以下不支持捕获，所以就少了这个阶段。

8、两个用于事件绑定的方法
  1、addEventListener(event, listener, useCapture)
    event：事件名称，比如click，没有on
    listener：监听函数
    useCapture：是否使用事件捕获进行事件捕捉，默认false，默认用的是事件冒泡
  2、attachEvent(event, listener)，主要用于IE10以下的
    event：事件名称，比如onclick
    listener：监听函数
9、阻止
  1、阻止事件冒泡：event.stopPropagation()
  2、阻止默认事件：event.preventDefault()


10、事件委托：一个事件本来要绑定到某个元素上，但是给它绑定到了父元素（祖先元素）上，利用事件冒泡原理，触发执行
    事件委托在jQuery中的表现： $(document).on("click", function(){})这种的。一般用于动态生成的元素。

11、事件委托的例子
    1、通过parent元素给children元素注册click事件
    2、新添加的元素也有事件
    3、获取点击元素的下标

12、事件委托的好处
    1、提高网页性能
        本来要对所有li都添加点击事件，现在只需要给Ul添加一个点击事件。减少了DOM操作。
    2、通过事件委托添加的事件，对于后来添加上的元素同样有效
        如何解释：比如有个ul，里面有两个li，通过循环给每个li添加点击事件，这两个li都可以触发事件。这时候我们通过append在ul里面再添加两个li，发先也能点击并触发事件。

示例：

var wrapper = document.getElementsByClassName('wrapper')[0];
var content = document.getElementsByClassName('content')[0];
var inner = document.getElementsByClassName('inner')[0];

wrapper.onclick = function(){
    console.log("wrapperBubble");
}
content.onclick = function(){
    console.log('contentBubble');
}
inner.onclick = function(){
    console.log("innerBubble")
}

wrapper.addEventListener('click',function(){
    console.log("wrapper");
},true);
content.addEventListener('click',function(){
    console.log("content");
},true);
inner.addEventListener('click',function(){
    console.log("innerBuhuo");
},true);

先捕获，后冒泡，作用于它自己身上的，就直接先点击哪个是哪个
事件执行的顺序符合谁先绑定谁先执行

并不是所有的事件都冒泡
不冒泡的：focus,blur,change,submit,reset,select等

封装阻止冒泡的方法

function stopBubble(e){
    if(e.stopPropagation){
        e.stopPropagation();
    }else{
        e.cancelBubble = true;
    }
}

不冒泡的事件：

focus,blur,change,submit,reset,select等

ul里的li不固定，输出li里面的内容，用事件委托的方式

var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function(e){
    var e = e || window.event;
    var target = e.target || e.srcElement;
    e.stopPropagation();
    console.log(target.innerText);
}

事件委托的优点：
1、性能高，不需要循环
2、灵活，可以有很多li

综合示例：

<style>
  #parent{
    width: 200px;
    height: 200px;
    background-color: red;
  }
  #child{
    width: 100px;
    height: 100px;
    background-color: green;
  }
</style>
<div id="parent">
  父元素
  <div id="child">子元素</div>
</div>


<ul>
  <li>click me</li>
  <li>click me</li>
  <li>click me</li>
  <li>click me</li>
  <li>click me</li>
</ul>

// 1、 通过parent元素给children元素注册click事件
var parent = document.getElementById("parent")
var child = document.getElementById("child")

// 我给父元素添加了点击事件，当我点击子元素的时候，同样也能触发
parent.onclick = function(e){
  if(e.target.id === "child"){
    console.log("click child")
  }
}

// 2、对新添加的元素也有事件
var ul = document.querySelector("ul");  // querySelector仅仅返回第一个符合的元素。
var lis = document.getElementsByTagName("li")
ul.onclick = function(e){
  var e = e || window.event
  var target = e.target || e.srcElement
  if(target.nodeName.toLowerCase() === "li"){
    console.log("this is li element")
  }
}
// 这时候，我们添加几个元素
var li = document.createElement("li")
li.innerHTML = "new click!"
ul.appendChild(li)
// 被添加的元素也有点击事件。


// 3.1、获取点击元素的下标
for(let i=0; i<lis.length; i++){
  lis[i].onclick = function(){
    console.log(i);
  }
}
// 3.2、或者，把i变成li的属性
for(var i=0; i<lis.length; i++){
  lis[i].index = i;
  lis[i].onclick = function(){
    console.log(this.index)
  }
}
// 3.3、声明一个立即执行函数
for(var i=0; i< lis.length; i++){
  lis[i].onclick = (function(n){
    return function(){
      console.log(n)
    }
  })(i)
}