事件基础

事件传播机制

事件冒泡

事件从目标节点开始沿DOM树向上传播，直到document, DOM结构中的下层节点会更早ji接收到事件，下层节点会更晚接收到事件。

事件冒泡

事件捕获

事件从document开始沿DOM树向下传播，直到目标节点，DOM结构中的上层节点会更早接收到事件，下层节点会更晚接收到事件

事件捕获

DOM事件流

DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，然后是实际目标接收事件，最后是冒泡阶段。

DOM事件流

事件处理程序

事件处理程序，又叫事件监听器，就是响应某个时间的函数。事件处理程序的绑定方式有一下几种

HTML内联方式

直接在HTML对应元素的属性里加上onxxx属性，xxx是事件类型名称，属性值是要执行的JavaScript代码。如

这样的方式存在的问题是HTML与JavaScript代码写在一些要改动事件处理程序就要改动两个地方，所以不推荐这种方式。

事件监听器属性

在JavaScript代码中将对应元素的onxxx属性设置为事件处理程序函数，xxx是事件类型名称，如

用这样的方式，事件处理程序被认为是函数的方法，this指向当前元素。
要解绑事件处理程序，将对应的属性设置为null即可，如btnClick.onclick = null

DOM2级事件处理程序

使用addEventListener()方法绑定事件处理程序，使用removeEventListener方法解绑事件处理程序。
这两个方法都接受3个参数：

• 事件类型
• 作为事件处理程序的函数
• 一个布尔值，默认是false，如果是false表示在冒泡阶段调用事件处理程序，如果是true表示在捕获阶段调用事件处理程序。

这样可以为一个事件绑定多个事件处理程序，它们会按照添加顺序依次执行。而事件处理程序属性只能为一个事件绑定一个事件处理程序。
通过addEventListener()绑定的事件可以同removeEventListener()方法移除，传递的参数应该与绑定时相同。如果需要移除一个用addEventListener()绑定的事件，绑定时不要使用匿名函数

阻止传播

事件处理程序函数会被传入一个Event对象作为参数。使用Event对象的stopPropagation()方法阻止事件在事件流中继续传播

    container
    

      outer
      

        inner
      
    
  
  

当点击inner的时候,输出

事件在冒泡传递到outer的时候被阻止传播，所以container上绑定的事件监听器没有执行

阻止默认行为

一些元素具有默认的行为，如点击标签会跳转，点击会发送提交表单的请求
。有些时候需要用Event对象的preventDefault()方法组织默认的行为。如表单提交时阻止默认的发送数据行为，用JS验证表单内容后再发送数据。或者验证一个链接不是外链的情况下再跳转

baidu


    
    

事件委托

事件处理程序过多会影响页面的性能，解决事件处理程序过多的问题可以用到事件委托技术。以下面的HTML代码为例

  
item 1
  
item 2
  
item 3

按照一般的方法，需要添加3个事件处理程序

var listItems = document.querySelectorAll('.list li')

listItems.forEach(function(item) {
  item.onclick = function() {
    alert(item.innerText)
  }
})

使用事件使用事件委托技术，可以将事件处理程序绑定在DOM树中位置更高的元素上。

var list = document.querySelector('.list')

list.onclick = function(e) {
  console.log(this)
  console.log(e.target)
  if (e.target.classList.contains('item')) {
    alert(e.target.innerText)
  }
}

控制台中可以看到 this指向的是事件处理程序所绑定的元素，而 e.target指向的是事件真正触发的元素