任务代码

预览

用到的新 API

1. .on('transitionend') -link
2. 更多事件见-事件类型一览表
3. .one() 为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次。 -link
4. ES6-模板字符串-表达式插补(${expression})

DOM事件模型

W3C
DOM Level 0: 在 W3C 出来之前的事实规范，比如 onclick，onmouseenter……或者直接在html里面写js函数
DOM Level 1: W3C整合之前的DOM0并没有做任何变更
DOM Level 2: 提供了 addEventListener 和 removeEventListener 等函数，这两个函数和onclick不同，onclick是属性，写第二个就会覆盖上一个，而addEventListener你可以认为是一个事件队列，一个事件一个队列，你可以往队列里添加多个函数，他们会按照顺序依次执行，removeEventListener则是将函数从队列中删除
同时，DOM2添加了两个阶段，捕获和冒泡

<div id="grand">
  grand
  <div id="parent">
    parent
    <div id="child">child</div>
  </div>
</div>
// 先捕获，后冒泡
// 第三个参数默认为false，即冒泡阶段执行函数
grand.addEventListener('click', function(){console.log(grand)})
parent.addEventListener('click', function(){console.log(parent)})
child.addEventListener('click', function(){console.log(child)})
// 点击child div
// child  parent  grand

// 第三个参数为 true，即捕获阶段执行函数
grand.addEventListener('click', function(){console.log(grand)}, true)
parent.addEventListener('click', function(){console.log(parent)}, true)
child.addEventListener('click', function(){console.log(child)}, true)
// 点击child div
// grand parent child

// 如果是同一个div的话
child.addEventListener('click', function(){console.log(child1)}, false)
child.addEventListener('click', function(){console.log(child2)}, true)
// 点击
// child1 dhild2
// 同一个不管第三个参数，他们按js代码书写顺序执行