js中的事件監聽（冒泡和捕獲）

常見的事件

大致分為幾類，瀏覽器事件 / 鼠標事件 / 鍵盤事件 / 表單事件 / 觸摸事件

事件監聽

• addEventListener : 非 IE 7 8 下使用

• 語法： 元素.addEventListener('事件類型'， 事件處理函數， 冒泡還是捕獲)

var box = document.querySelector('.box')
    box.addEventListener('click', function () {
        console.log('我是第一個事件')
    },false)
    box.addEventListener('click', function () {
        console.log('我是第二個事件')
    },false)

 ° 當你點擊 div 的時候，兩個函數都會執行，並且會按照你注冊的順序執行

    ° 先打印 我是第一個事件 再打印 我是第二個事件

    ° 注意： 事件類型的時候不要寫 on，點擊事件就是 click，不是 onclick

• attachEvent ：IE 7 8 下使用

• 語法： 元素.attachEvent('事件類型'， 事件處理函數)

 box.attachEvent('onclick', function () {
        console.log('我是第二個事件')
    })
    box.attachEvent('onclick', function () {
        console.log('我是第二個事件')
    })

 ° 當你點擊 div 的時候，兩個函數都會執行，並且會按照你注冊的倒序執行

    ° 先打印 我是第二個事件 再打印 我是第一個事件

    ° 注意： 這個需要些on方法

事件的傳播

• 事件傳播也稱為事件流，指的是事件的流向，事件的執行順序。比如在一個大盒子里有一個小盒子，都給他們綁定點擊事件。點擊小盒子大盒子的事件也會被觸發

• 這個就叫事件的傳播

    ° 當元素觸發一個事件的時候，其父元素也會觸發相同的事件，父元素的父元素也會觸發相同的事件

    ° 也就是說，頁面上任何一個元素觸發事件，都會一層一層最終導致 window 的相同事件觸發，前提是各 層級元素得有注冊相同的事件，不然不會觸發

• 在事件傳播的過程中，有一些注意的點：

　　1. 只會傳播同類事件

　　2.只會從點擊元素開始按照 html 的結構逐層向上元素的事件會被觸發

　　3.內部元素不管有沒有該事件，只要上層元素有該事件，那么上層元素的事件就會被觸發

 

冒泡和捕獲

• 冒泡

　　° 就是從事件 目標 的事件處理函數開始，依次向外，直到 window 的事件處理函數觸發（先執行目標元素事件，再依次執行父元素事件）

　　° 也就是從下向上的執行事件處理函數

• 捕獲

　　° 就是從 window 的事件處理函數開始，依次向內，直到事件 目標 的事件處理函數執行（最后才執行目標元素）

　　° 也就是從上向下的執行事件處理函數

 

 

 

阻止事件傳播

• 如果想只觸發當前點擊對象的事件，不想讓外層的事件觸發 ，可以使用不冒泡e.cancelBubble=true或不傳播 e.stopPropagation()

var box = document.querySelector('.box')
    var atr = document.querySelector('.atr')
    box.onclick = function (e) {
        e.stopPropagation() // 不傳播
        console.log('我被點擊了box')
    }
    atr.onclick = function (e) {
        e.cancelBubble=true //不冒泡
        console.log('我被點擊了atr')
    }

事件委托

• 就是把我要做的事情委托給別人來做

• 因為我們的冒泡機制，點擊子元素的時候，也會同步觸發父元素的相同事件 ，所以我們就可以把子元素的事件委托給父元素來做

• 點擊子元素的時候，不管子元素有沒有點擊事件，只要父元素有點擊事件，那么就可以觸發父元素的點擊事件

 

    atr.onclick = function (e) {

        // e.stopPropagation()

        var e = e || window.event //event兼容寫法

        var target = e.target || e.srcElement //target兼容寫法

        console.log(target,'執行子盒子的點擊事件')

    }

    box.onclick = function (e) {

        var e = e || window.event //event兼容寫法

        var target = e.target || e.srcElement //target兼容寫法

        console.log(target,'執行父盒子的點擊事件')

    }

target

• target 這個屬性是事件對象里面的屬性，表示你點擊的目標

• 當你觸發點擊事件的時候，你點擊在哪個元素上，target 就是哪個元素

• 這個 target 也不兼容，在 IE 下要使用 srcElement

var box = document.querySelector('.box')
    var atr = document.querySelector('.atr')
    
    atr.onclick = function (e) {
        var e = e || window.event //event兼容寫法
        var target = e.target || e.srcElement //target兼容寫法
        console.log(target)
    }

委托

• 這個時候，當我們點擊 box里面的元素的時候，也可以觸發 box 的點事件

• 並且在事件內不，我們也可以拿到你點擊的到底是哪個對象

• 這個時候，我們就可以把 li 的事件委托給 box 父級來做

var box = document.querySelector('.box')
    var atr = document.querySelector('.atr')
    
    atr.onclick = function (e) {
        var e = e || window.event //event兼容寫法
        var target = e.target || e.srcElement //target兼容寫法
        if(target.className=='atr'){
            //這里面就找到需要操作的元素
            console.log(111)
        }
    }

最后我們想下，為啥使用事件委托？

1.提高性能和效率

2. 減少事件注冊，節省內存占用

3. 未來元素無需再次注冊事件

4.后面添加的元素也會有事件

 

默認行為

• 默認行為，就是不用我們注冊，它自己就存在的事情

　　° 比如我們點擊鼠標右鍵的時候，會自動彈出一個菜單

　　° 比如我們點擊 a 標簽的時候，我們不需要注冊點擊事件，他自己就會跳轉頁面

• 這些不需要我們注冊就能實現的事情，我們叫做默認事件

阻止默認行為

• 有的時候，我們不希望瀏覽器執行默認事件

　　º 比如我給 a 標簽綁定了一個點擊事件，我點擊你的時候希望你能告訴我你的地址是什么 ，而不是直接跳轉鏈接

　　º 那么我們就要把 a 標簽原先的默認事件阻止，不讓他執行默認事件

• 我們有兩個方法來阻止默認事件

　　º e.preventDefault() : 非 IE 使用

　　° e.returnValue = false ：IE 使用

• 我們阻止默認事件的時候也要寫一個兼容的寫法

var oA = document.querySelector('a')
    a.addEventListener('click', function (e) {
        e = e || window.event
        console.log(this.href)
        //下面這個是兼容寫法
        e.preventDefault ? e.preventDefault() : e.returnValue = false
    })

參考來源：https://www.cnblogs.com/dcyd/p/12482989.html