1.解释以下概念：事件传播机制、阻止传播、取消默认事件、事件代理

• 基础

  什么是事件？
  JavaScript和HTML的交互是通过事件实现的。事件是某个行为或者触发，比如点击、鼠标移动，图片加载等。
  什么是事件流？
  事件流描述的是从页面中接收事件的顺序。当用户点击了一个有嵌套关系的元素时，那是先点击的是用户本身想要点击的被嵌套的元素，还是嵌套元素的父元素？这里有三种事件传播的模型：事件冒泡，事件捕获，DOM事件流。
  1.事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
  

  事件冒泡
  2.事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反(ie低版本没有捕获）
  事件捕获
  3.DOM事件流：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段
  DOM事件流

• 事件传播机制

当一个事件发生以后，它会在不同的DOM节点之间传播。这种传播分为三个阶段：

事件传播机制

• 第一阶段，“捕获阶段”。：事件从document开始向下传，一直传到触发的目标节点上，在这个过程中会依次检测是否有节点绑定了事件的监听函数，如果有就会执行。
• 第二阶段，目标阶段：事件到达目标节点，并且触发监听函数。
• 第三阶段，冒泡阶段：从目标节点依次上传，直到document，再依次判断是否有节点绑定了监听函数。
  这种三阶段的传播模型，会使得一个事件在多个节点上触发，比如会在捕获阶段和冒泡阶段在一个节点上执行两次。

• 阻止传播

如果有特殊情况，需要事件在某个节点上停止传播，就可以使用stopPropagation()取消事件进一步捕获或冒
泡,防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上新定义的事件监听函数

document.querySelector('#box') = function(e){
e.stopPropagation() //阻止传播
}

• 取消默认事件

取消浏览器对当前事件的默认行为，像有些元素时有默认的事件的，比如<a>标签，在点击的时候默认会打开所含的超链接。如果想要自定义点击<a>链接的操作，就可以通过preventDefault()取消事件默认行为

document.querySelector('a') = function(e){
e.preventDefault() //阻止默认事件
}

• 事件代理

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数统一处理。指定一个事件处理程序，就可以管理某一类型的所有事件

document.querySelector('ul').addEventListener('click', function(event){
    if(event.target.tagName.toLowerCase() === 'li'){   //或者if(e.target.classList.contains('box'))用class来选择
        //监听ul下面的所有li
    }
})

如果之后再在ul里面添加li，监听函数也可以监听新增的li

2.写一个 Demo，演示事件传播的过程，演示阻止传播的效果

捕获阶段还是冒泡阶段，可以通过addEventListener第三个参数cancelable属性来控制。默认是falsse为冒泡阶段，可以设置为true变成捕获阶段

html+css
<style> 
    .container,
    .box,
    .target{
      border: 1px solid;
      padding: 10px;
    }  
  </style>
  <button id="btn">click</button>

  <div class="container">
    container
    <div class="box">
      box
      <div class="target">target</div>
    </div>
  </div>

js
<script>
  var $ = function(e){
    return document.querySelector(e)
  }
  $('.container').addEventListener('click',function(){
    console.log('container 捕获阶段')
  },true)
  $('.box').addEventListener('click',function(){
    console.log('box 捕获阶段')
  },true)
  $('.target').addEventListener('click',function(){
    console.log('target 捕获阶段')
  },true)
   $('.target').addEventListener('click',function(){
    console.log('target 冒泡阶段')
  },false)
  $('.box').addEventListener('click',function(){
    console.log('box 冒泡阶段')
  },false)
  $('.container').addEventListener('click',function(){
    console.log('container 冒泡阶段')
  },false)
//正常点击target  输出
//container 捕获阶段
//box 捕获阶段
//target 捕获阶段
//target 冒泡阶段
//box 冒泡阶段
//container 冒泡阶段
</script>
如果想让事件在 box冒泡阶段 停止
<script>
  var $ = function(e){
    return document.querySelector(e)
  }
  $('.container').addEventListener('click',function(){
    console.log('container 捕获阶段')
  },true)
  $('.box').addEventListener('click',function(){
    console.log('box 捕获阶段')
  },true)
  $('.target').addEventListener('click',function(){
    console.log('target 捕获阶段')
  },true)
   $('.target').addEventListener('click',function(){
    console.log('target 冒泡阶段')
  },false)
  $('.box').addEventListener('click',function(e){
    e.stopPropagations()  //这里不能用this 
    console.log('box 冒泡阶段')
  },false)
  $('.container').addEventListener('click',function(){
    console.log('container 冒泡阶段')
  },false)
//container 捕获阶段
//box 捕获阶段
//target 捕获阶段
//target 冒泡阶段
//box 冒泡阶段
</script>

3.解释DOM2事件传播机制

如果用单独的事件绑定，比如

document.querySelector('.button').onclick = function(){
  console.log('1')
}
document.querySelector('.button').onclick = function(){
  console.log('2')
}
//2

想让.button在被点击的时候触发两个事件，此时第二个监听函数会覆盖第一个，最后的输出 结果只有2
这个时候不要把onclick当成一个触发时间，要把它看成一个“属性”，那么后面的“属性”会覆盖掉前面的“属性”

<ul>
  <li class="box">box1</li>
  <li class="box">box2</li>
</ul>
document.querySelectorAll('.box').onclick = function(){
    console.log(this.innerText)
  }
//一个都输出不了

因为选择的是一个数组，没有onclick，除非用数组的forEach去遍历每一个数组，但是写起来又特别的麻烦

DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作：
addEventListener
removeEventListener
所有的DOM节点都包含这两个方法，并且它们都接受三个参数：
1.事件类型
2.事件处理方法
3.布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理
这时，想要实现上面的效果就很容易了

document.querySelector('.button').addEventListener('click', function(){
  console.log('1')
},false)
document.querySelector('.button').addEventListener('click', function(){
  console.log('2')
},false)
//1
//2

4.补全代码

要求：

• 当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
• 当点击每一个元素li时控制台展示该元素的文本内容。

<ul class="ct">
  <li>这里是</li>
  <li>饥人谷</li>
  <li>任务班</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
//你的代码
</script>

<script>
  var $ = function(e){
    return document.querySelector(e)
  }
  
  var ct = $('.ct')
  var addstr = $('#btn-add-start')
  var addend = $('#btn-add-end')
  var input = $('.ipt-add-content')
  
  addstr.onclick = function(){
    if(input.value !== ''){
      var box = document.createElement('li')
      box.innerText = input.value
      ct.insertBefore(box, ct.firstChild)
    }
  }
  
  addend.onclick = function(){
    if(input.value !== ''){
      var box = document.createElement('li')
      box.innerText = input.value
      ct.appendChild(box)
    }
  }
  
  $('.ct').addEventListener('click', function(s){   //监听点击
    if(s.target.tagName.toLowerCase() === 'li'){
      console.log(s.target.innerText)
    }
  })
</script>

5.onlick与addEventListener的区别

• onclick事件在同一时间只能指向唯一对象
• addEventListener给一个事件注册多个listener
• addEventListener对任何DOM都是有效的，而onclick仅限于HTML
• addEventListener可以控制listener的触发阶段（捕获/冒泡）。对于多个相同的事件处理器，不会重复触发，不需要手动使用removeEventListener清除
• IE9使用attachEvent和detachEvent