陪你一塊兒學習之javascript事件

背景

現在的前端圈堪比是娛樂圈，雖然火熱程度不及當年，可是活躍程度仍是很厲害的，各類技術使人眼花繚亂。從小程序到各類混合開發的解決方案，從vue，react到angular，從canvas到three.js甚至webgl，從cmd到nodejs，從gulp到webpack，各類技術讓人眼花繚亂，感受學不過來了有沒有。其實這些技術咱們只要朝着一個方向努力慢慢積累，總結就會慢慢成長的，無需跳過心急。

見解

本身平時老是把精力放在node，webpack之類的東西上，可是不少東西都須要查，其實後來才發現基礎纔是最重要的。我一直很看重基礎的學習，雖然我js基礎我非常不滿意，哈哈，可是我會像你們同樣一塊兒學習，總結的，你們一塊兒加油。最近在聽 喜馬拉雅app裏面的 《陪你讀書javacript》，不知道有沒有一塊兒，若是恰好有喜馬拉雅，我推薦你們聽一下，直接搜就行，老師比較系統的講js，三個特別來形容吧，特別基礎，特別深奧，特備有趣

注：我不是打廣告的啊，我真的是聽了他的課，來總結的只是點的，哈哈；

事件流

• 冒泡
• 捕獲

事件級別

• dom0 HTML
• dom2 屬性事件
• dom3 事件監聽

dom0事件(html事件)

<div onclick="alert（'1'）"></div>

複製代碼

dom2事件（屬性事件）

let dom = document.querySelector(".dom");
dom.onclick = function(){
    //執行代碼
}

複製代碼

dom3事件（事件監聽）

let dom = document.querySelector(".dom");
    dom.addEventListener('click', function(){
        // 處理函數
    }, true);

複製代碼

addEventListender接受三個參數，第一個參數爲 事件名稱，如（click、mousedown），第二個爲 事件對應的處理函數，第三個是 是否爲事件捕獲經常使用的是傳一個 Boolean值（true表示在事件捕獲階段觸發，false表示在事件冒泡階段觸發），也能夠傳一個對象，下面會詳細講解。

其實這些東西，js稍微有點基礎的同窗們，都應該常常用這些東西，我總結一下方便你們記得更深入，哈哈。下面主要講一下 addEventListener的幾個參數。

先給一下基礎的html結構：

<div class="box">
	<div class="child"></div>
</div>
複製代碼

下面是javascript代碼:

let dom = document.querySelector(".dom");
    dom.addEventListener('click', function(){
        // 處理函數
    }, true);

    let box = document.querySelector('.box');
    let child = document.querySelector('.child');
    let boxEvent = function(){
    	console.log('box');
    }
    let childEvent = function(){
    	console.log('child');
    }
    
    box.addEventListener('click', boxEvent, true);
    child.addEventListener('click', childEvent, true);

複製代碼

這你們確定都很瞭解，我就簡單總結一下：

代碼如上，咱們點擊了child。

• 若是第三個參數爲false（事件在冒泡階段觸發），那麼控制檯打印的順序爲child，box
• 若是第三個參數爲true（事件在捕獲階段觸發），那麼控制檯打印的順序爲box，child
• 注意:無論css怎麼設置都不會影響事件的執行，好比 child經過css定位特別大，徹底蓋住了這個box，依然不會影響事件執行書序。

若是咱們要取消事件監聽把上面的addEventListener替換爲removeEventListener便可，可是須要注意如下幾點

• 若是事件的處理函數用的不是函數名，而是匿名函數，則不管如何都沒法取消這個事件，由於咱們沒法找這個函數的引用。
• 事件的參數要對應，好比監聽的是捕獲時的事件（第三個參數爲true）時，咱們取消時也須要設置一樣的值，反之亦然。

上面提到addEventListener第三個參數也能夠是個對象，咱們平時通常不多會用到（至少我是不多用），下面就給你們仔細介紹下以便一塊兒記憶,看下面的代碼:

el.addEventListener(eventType, optionFunction, {
    capture: false, // 和直接把第三個參數填寫布爾值同樣，表明是否爲捕獲時觸發事件
    once: false, // 默認fasle，是否只執行一次
    passive: false //默認爲false，表明是否承諾瀏覽器不會調用e.preventDefault()來阻止默認行爲
    })

複製代碼

對於addEventListener第三個參數裏的passive，在多講幾句吧，以下：

• 背景：對於一個事件監聽，瀏覽器是不知道他會不會執行默認行爲（好比滾動條等），因此瀏覽器只能等事件結束了纔會執行默認行爲，而不少狀況下，咱們是不會禁止行爲的，可是沒辦法，咱們沒有給瀏覽器承諾，因此瀏覽器每次都須要等你執行完事件函數的東西才能知道你沒有調用e.preventDefault()，而後才執行默認行爲，這就形成了資源郎芬
• 優勢：對於一些咱們不會阻止默認行爲的狀況，咱們在監聽函數的時候，設置了passive：true，瀏覽器就會提早知道你並不會使用e.preventDefault(),瀏覽器就會本身進行優化無需等事件處理函數執行完就能夠執行默認行爲，這樣在有些極端狀況下（好比處理特別頻繁的事件中好比，touchmove，scroll）會提升不少的性能
• 表現： 若是設置了passive：true，可是咱們又設置了e.preventDefault()呢，親測chrome瀏覽器下會報錯，Unable to preventDefault inside passive event listener invocation.

關於event

event.target和event.currentTarg區別

• event.target: 返回觸發事件的元素（在事件委託中用的就是target）
• event.currentTarget: 返回綁定事件的元素

下面是我本身實現小型jq中的on方法（ dom綁定事件）

通常狀況下

on(evtName, evtFunc, isCatch = true) {

        document.addEventListener(evtName, (e) => {
            this.domList.forEach(dom => {
                if (e.target == dom) {
                    evtFunc.call(e.target);
                }
            })
        }, isCatch);
    }
    

     $(".lala").on('click',function(){
      console.log(this);// 打印當前觸發事件的元素
    })

複製代碼

若是上面的evtFunc.call(e.target);爲 evtFunc.call(e.currentTarget);

on(evtName, evtFunc, isCatch = true) {

        document.addEventListener(evtName, (e) => {
            this.domList.forEach(dom => {
                if (e.target == dom) {
                    evtFunc.call(e.currentTarget);
                }
            })
        }, isCatch);
    }
    

     $(".lala").on('click',function(){
      console.log(this);// 這裏無論點擊誰都打印  document了，由於是document綁定的事件
    })

複製代碼

總結

以上是我對js事件的一些總結，全部的代碼都算是我直接在有道雲敲的，沒有用ide，入股哪裏有寫錯的，還請你們給以友善的提醒，或者有些的不合適甚至錯的地方，你們一塊兒來糾正學習。

寫這些只是一個開始，我一會會按期更新基礎知識點的，但願你們一塊兒來總結學習，有沒有發現不少知識，廢了很久的勁兒學會了，可是長久不用又忘了，這就須要咱們學習的時候 即便總結下來，咱們纔會記得久一點。 若是想和我一塊兒學習的，歡迎加個人學習羣前端雜貨鋪(小遊戲/Vue)啦啦啦，羣聊號碼：677482875，你們一塊兒交流，嘻嘻噠。

from：愛你的蝸牛。