事件傳播機制

事件冒泡

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

事件冒泡

事件捕獲

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

事件捕獲

DOM事件流

DOM2級事件規(guī)定事件流包括三個階段肋乍，事件捕獲階段，處于目標(biāo)階段敷存，事件冒泡階段墓造，首先發(fā)生的是事件捕獲，然后是實際目標(biāo)接收事件锚烦，最后是冒泡階段觅闽。

DOM事件流

事件處理程序

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

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

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

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

在JavaScript代碼中將對應(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)前元素。
要解綁事件處理程序，將對應(yīng)的屬性設(shè)置為null即可豁辉，如btnClick.onclick = null

DOM2級事件處理程序

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

• 事件類型
• 作為事件處理程序的函數(shù)
• 一個布爾值徽级，默認(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>

這樣可以為一個事件綁定多個事件處理程序现使，它們會按照添加順序依次執(zhí)行。而事件處理程序?qū)傩灾荒転橐粋€事件綁定一個事件處理程序旷痕。
通過addEventListener()綁定的事件可以同removeEventListener()方法移除碳锈，傳遞的參數(shù)應(yīng)該與綁定時相同。如果需要移除一個用addEventListener()綁定的事件欺抗，綁定時不要使用匿名函數(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ù)會被傳入一個Event對象作為參數(shù)售碳。使用Event對象的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)點擊inner的時候,輸出

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

阻止默認(rèn)行為

一些元素具有默認(rèn)的行為绞呈，如點擊<a>標(biāo)簽會跳轉(zhuǎn)贸人，點擊<input type="submit">會發(fā)送提交表單的請求
。有些時候需要用Event對象的preventDefault()方法組織默認(rèn)的行為佃声。如表單提交時阻止默認(rèn)的發(fā)送數(shù)據(jù)行為灸姊，用JS驗證表單內(nèi)容后再發(fā)送數(shù)據(jù)”龋或者驗證一個<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>

事件委托

事件處理程序過多會影響頁面的性能力惯，解決事件處理程序過多的問題可以用到事件委托技術(shù)。以下面的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)
  }
})

使用事件使用事件委托技術(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)
  }
}