DOM事件委託之取消事件冒泡

    事件代理又叫事件委託，JavaScript高級程序設計上講：事件委託就是利用事件冒泡，只指定一個事件處理程序，就能夠管理某一類型的全部事件。     

    但若是咱們不想實現事件委託，卻發生了事件冒泡呢？

     在遇到父元素和子元素都有點擊事件的狀況下，點擊父元素（父元素範圍 > 子元素）是沒有任何問題的，但當咱們點擊子元素時就不得不面臨「事件冒泡」的問題了。但開心的是，事件冒泡是能夠取消的。

    本來只是想解決demo中的一個小問題，解決時候發現，這不正是事件冒泡問題嗎？DOM事件委託都快忘記了，正好趁此把筆記拿出來再梳理一遍。

如下是我遇到事件冒泡問題的場景：

kbdX.onclick = function(keyb){
    keyi = keyb.target.innerText[0].toLowerCase()
    website = hash[keyi];
    console.log(website)
    // location.href = 'http://' +  website;
    window.open('http://' +  website, '_blank');
}
buttonXE.textContent = 'E';
buttonXE.id = keys[i][j];
buttonXE.onclick = function(keyd){
    // keyd.target是用戶點擊的元素
    console.log(keyd.target.id)
    keyX = keyd.target.id
    new_website = prompt('更改按鍵對應的導航網址')
    hash[keyX] = new_website // hash變動
    localStorage.setItem('update_website', JSON.stringify(hash));
    keyd.stopPropagation(); // 阻止冒泡事件
    location.reload(); // 頁面刷新重載
    // console.log(hash)
}
divX.appendChild(kbdX);
kbdX.appendChild(buttonXE);

    顯然 kbdX 是 buttonXE 的父級，當咱們點擊 buttonXE 時發現， kbdX點擊事件一樣會被觸發，這就是由於發生了事件冒泡。

   

     那麼先讓咱們來了解一下什麼是事件冒泡呢？

     從外向內找監聽函數，事件捕獲；(網景提出) 從內向外找監聽函數，事件冒泡。(IE5提出)

    同時咱們還要區分target VS currentTarget ：

    e.target：用戶操做的元素

    e.currentTarget：程序員監聽的元素

    this是ecurrentTarget，因此不推薦使用this，擔當只有一個div 被監聽（不考慮父子同時被監聽），fn分別在捕獲階段和冒泡階段監聽click事件，用戶點擊的元素就是開發者監聽的。 

    取消事件冒泡

    捕獲不能夠取消，冒泡能夠 e.stopPropagation()可中斷冒泡，瀏覽器再也不向上走。

    這裏我就是採用的e.stopPropagation()直接中斷冒泡，阻止了 kbdX點擊事件的發生。

 

    有些事件不可取消冒泡 ，在scroll event中，Bubble---是否冒泡，Cancelable---開發者是否能夠取消冒泡

    舉例：如何阻止冒泡 scroll事件不可取消冒泡，阻止scroll默認動做沒用，因先有滾動纔有滾動事件；要阻止滾動，可阻止wheel和touchstart的默認動做；注意須要找準滾動條所在元素；若滾動條還能用，用CSS讓滾動條display: none

     CSS使用overflow: hidden能夠直接取消滾動條 此時JS依然能夠修改scrollTop

 

     固然咱們也能夠自定義事件，這就屬於DOM事件委託的拓展了，之後學習到會再整理。