事件传播机制

事件冒泡

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

事件冒泡

事件捕获

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

事件捕获

DOM事件流

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

DOM事件流

事件处理程序

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

HTML内联方式

直接在HTML对应元素的属性里加上onxxx属性，xxx是事件类型名称，属性值是要执行的JavaScript代码。如
<input type="button" value="Click Me" onclick="alert('Clicked')">
这样的方式存在的问题是HTML与JavaScript代码写在一些要改动事件处理程序就要改动两个地方，所以不推荐这种方式。

事件监听器属性

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

<input id="btnClick" type="button" value="Click Here" />

<script type="text/javascript">
    var btnClick = document.getElementById('btnClick');
    btnClick.onclick = function showMessage(e) {
        alert(this.id);
    };
</script>

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

DOM2级事件处理程序

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

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

<input id="btnClick" type="button" value="Click Here" />

<script type="text/javascript">
    var btnClick = document.getElementById('btnClick');
    btnClick.addEventListener('click', function() {
        alert(this.id);
    }, false);
</script>

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

<input id="btnClick" type="button" value="Click Here" />

<script type="text/javascript">
    var btnClick = document.getElementById('btnClick');

    var handler=function() {
        alert(this.id);
    }

    btnClick.addEventListener('click', handler, false);
    btnClick.removeEventListener('click', handler, false);
</script>

阻止传播

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

<div id="container">
    container
    <div id="outer">
      outer
      <div id="inner">
        inner
      </div>
    </div>
  </div>
  <script>
    container.addEventListener('click', function(e) {
      console.log('conctainer clicked capture');
    }, true)
    container.addEventListener('click', function(e) {
      console.log('conctainer clicked bubble');
    })
    
    outer.addEventListener('click', function(e) {
      console.log('outer clicked capture')
    }, true)
    outer.addEventListener('click', function(e) {
      e.stopPropagation();
      console.log('outer clicked bubble')
    })
    
    inner.addEventListener('click', function(e) {
      console.log('inner clicked capture')
    },true)
    inner.addEventListener('click', function(e) {
      console.log('inner clicked bubble')
    },false)
  </script>

当点击inner的时候,输出

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

阻止默认行为

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

<a href="http://baid.com">baidu</a>
<script>
  document.querySelector('a').onclick= function(e){
    e.preventDefault()
    console.log(this.href)
    if(/baidu.com/.test(this.href)){
      location.href = this.href
    }
  }
</script>
<form action="/login">
    <input type="text" name="username">
    <input type="submit">
</form>
<script>
    document.querySelector('form').addEventListener('submit', function(evt){
        evt.preventDefault()
        if(document.querySelector('input[name=username]').value === 'jirengu'){
            this.submit()
        }
    })
</script>

事件委托

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

<ul class=“myList”>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

按照一般的方法，需要添加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)
  }
}