事件

事件代理

由于会在冒泡阶段向上传播到父节点，所以可把监听函数定义在节点的父节点上，由父节点的监听函数处理子节点的事件。称为事件代理。

为什么要代理

有时候直接选择事件没法选到全部需要的事件，
如这个场景：http://js.jirengu.com/sicocisotu/1/edit?html,js,output
可使用forEach方法,配上querySelectorAll()

$$('.box').forEach(function(node) {
  node.onclick = function(){
    console.log(this.innerText)
  }
})

用forEach遍历了全部事件也无法选到后来JS再冒出来的事件。
这时候最好使用事件代理，用其父容器可以选中全部容器。

因为事件发生会在不同的DOM节点中传播，主要分三个阶段

• 从window对象传导到目标节点，称为捕获阶段。
• 于目标节点上触发，称为目标阶段。
• 从目标节点传导会window对象，称为冒泡阶段。

事件传播的最上层对象是window，接着依次为document,html,body,然后是其他元素。所以在捕获阶段，传播顺序依次为window,document,html,body,其他元素。冒泡阶段依次为其他元素，body,html,document,window。
所以事件总是会冒泡到其父容器上。
选择其父容器，target表示选中元素。

$('.container').onclick = function(e){
  console.log(e.target.innerText)

但在这里推荐使用addEventListener

$('.container').addEventListener('click', function(e){
  console.log(e.target.innerText)
})

addEventListener与onclick区别

onlick与addEventListener的区别在于 JS指定与DOM2级的事件处理程序的区别。
JS指定事件处理程序：通过将函数赋值事件处理程序。也就是将元素的属性值设置为一个函数，事件处理将被认为是元素的方法，在当前元素的作用域下执行。一个事件处程序理对应一个处理函数。移除时将元素属性值设置为null即可。
如

$('.ct').onclick = function(e){
    console.log(e.target.innerText)
}

DOM2级事件处理：通过addEventListener()方法添加,removeEventListener()方法删除。接受三个参数分别为事件类型，事件处理方法，布尔参数(true则在捕获阶段处理，false则在冒泡阶段处理)，同样在元素作用域下执行。
如

$('.ct').addEventListener('click', function(e){
  console.log(e.target.innerText)
}, false)

效果一样，区别在于使用addEventListener可同时为一个事件添加多个处理程序，使用onlick时一个事件只能对应一个处理程序。