事件傳播機(jī)制

事件冒泡

事件從目標(biāo)節(jié)點(diǎn)開始沿DOM樹向上傳播，直到document, DOM結(jié)構(gòu)中的下層節(jié)點(diǎn)會(huì)更早ji接收到事件，下層節(jié)點(diǎn)會(huì)更晚接收到事件。

事件冒泡

事件捕獲

事件從document開始沿DOM樹向下傳播，直到目標(biāo)節(jié)點(diǎn)，DOM結(jié)構(gòu)中的上層節(jié)點(diǎn)會(huì)更早接收到事件，下層節(jié)點(diǎn)會(huì)更晚接收到事件

事件捕獲

DOM事件流

DOM2級(jí)事件規(guī)定事件流包括三個(gè)階段，事件捕獲階段，處于目標(biāo)階段，事件冒泡階段，首先發(fā)生的是事件捕獲，然后是實(shí)際目標(biāo)接收事件，最后是冒泡階段。

DOM事件流

事件處理程序

事件處理程序，又叫事件監(jiān)聽器，就是響應(yīng)某個(gè)時(shí)間的函數(shù)。事件處理程序的綁定方式有一下幾種

HTML內(nèi)聯(lián)方式

直接在HTML對(duì)應(yīng)元素的屬性里加上onxxx屬性，xxx是事件類型名稱，屬性值是要執(zhí)行的JavaScript代碼。如
<input type="button" value="Click Me" onclick="alert('Clicked')">
這樣的方式存在的問題是HTML與JavaScript代碼寫在一些要改動(dòng)事件處理程序就要改動(dòng)兩個(gè)地方，所以不推薦這種方式。

事件監(jiān)聽器屬性

在JavaScript代碼中將對(duì)應(yīng)元素的onxxx屬性設(shè)置為事件處理程序函數(shù)，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>

用這樣的方式，事件處理程序被認(rèn)為是函數(shù)的方法，this指向當(dāng)前元素。
要解綁事件處理程序，將對(duì)應(yīng)的屬性設(shè)置為null即可，如btnClick.onclick = null

DOM2級(jí)事件處理程序

使用addEventListener()方法綁定事件處理程序，使用removeEventListener方法解綁事件處理程序。
這兩個(gè)方法都接受3個(gè)參數(shù)：

• 事件類型
• 作為事件處理程序的函數(shù)
• 一個(gè)布爾值，默認(rèn)是false，如果是false表示在冒泡階段調(diào)用事件處理程序，如果是true表示在捕獲階段調(diào)用事件處理程序。

<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>

這樣可以為一個(gè)事件綁定多個(gè)事件處理程序，它們會(huì)按照添加順序依次執(zhí)行。而事件處理程序?qū)傩灾荒転橐粋€(gè)事件綁定一個(gè)事件處理程序。
通過addEventListener()綁定的事件可以同removeEventListener()方法移除，傳遞的參數(shù)應(yīng)該與綁定時(shí)相同。如果需要移除一個(gè)用addEventListener()綁定的事件，綁定時(shí)不要使用匿名函數(shù)

<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>

阻止傳播

事件處理程序函數(shù)會(huì)被傳入一個(gè)Event對(duì)象作為參數(shù)。使用Event對(duì)象的stopPropagation()方法阻止事件在事件流中繼續(xù)傳播

<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>

當(dāng)點(diǎn)擊inner的時(shí)候,輸出

事件在冒泡傳遞到outer的時(shí)候被阻止傳播，所以container上綁定的事件監(jiān)聽器沒有執(zhí)行

阻止默認(rèn)行為

一些元素具有默認(rèn)的行為，如點(diǎn)擊<a>標(biāo)簽會(huì)跳轉(zhuǎn)，點(diǎn)擊<input type="submit">會(huì)發(fā)送提交表單的請(qǐng)求
。有些時(shí)候需要用Event對(duì)象的preventDefault()方法組織默認(rèn)的行為。如表單提交時(shí)阻止默認(rèn)的發(fā)送數(shù)據(jù)行為，用JS驗(yàn)證表單內(nèi)容后再發(fā)送數(shù)據(jù)。或者驗(yàn)證一個(gè)<a>鏈接不是外鏈的情況下再跳轉(zhuǎn)

<a >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>

事件委托

事件處理程序過多會(huì)影響頁面的性能，解決事件處理程序過多的問題可以用到事件委托技術(shù)。以下面的HTML代碼為例

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

按照一般的方法，需要添加3個(gè)事件處理程序

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

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

使用事件使用事件委托技術(shù)，可以將事件處理程序綁定在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)
  }
}