和我一起理解js中的事件物件

皮卡丘和羊寶貝?發表於2021-02-05
JS事件物件

我們知道在JS中常用的事件有：

  1. 頁面事件：load；
  2. 焦點事件：focus，blur；
  3. 滑鼠事件：click，mouseout，mouseover，mousemove等；
  4. 鍵盤事件：keydown，keyup，keypress；
  5. form表單事件：reset，submit；
  6. 內容變化事件：change，input

那JS中“事件物件”，到底是個什麼東西？

首先，什麼是事件呢？

首先說JS就是為了實現一些動態的操作，而使用者會有時候想去實現一些功能，如提交表單，滑鼠點選等，就要在瀏覽器中觸發這個事件，然後瀏覽器會感知（或者說捕獲）到使用者的這個行為，就會去響應處理這個事件。這個就稱之為事件。

那麼說，產生事件物件的原因是什麼？

事件的觸發，大部分情況下是使用者想去操作的一種行為，也就是說，我們並不能確定使用者什麼時間觸發；而且，由於事件的傳播機制，我們甚至不能確定事件具體觸發在哪個節點；這是一件令人很頭疼的事情；

為了解決這個問題，在事件發生以後，系統會呼叫我們寫好的事件處理程式（一段程式碼）來解決。

由此，引出了什麼是事件物件？

系統會在呼叫處理程式時，把有關事件發生的一切資訊，封裝成一個物件，作為引數，傳送給監聽函式（事件處理程式）。那麼說這個物件，稱之為事件物件。

根據事件型別的不同，事件物件中包含的資訊也有所不同；如點選事件中，包含滑鼠點選的橫縱座標位置，鍵盤事件中，包含鍵盤的鍵值等；

<body>
    <div id="div">
        <p>pppp</p>
    </div>
    <input type="text" value="" id="i">
</body>
<script>
var d = document.getElementById('div');
//滑鼠事件
d.addEventListener('click',function(e){
    console.log(e);
});
var i = document.getElementById('i');
//鍵盤事件
i.addEventListener('keydown',k);
function k(e){
    console.log(e);
}
</script>

現在瞭解了事件物件的含義後，我們來看看事件物件中都有哪些屬性和方法？

（1） 普通屬性:

  • event.bubbles: 返回一個布林值，表示當前事件是否會冒泡;
  • event.eventPhase：返回一個整數值，表示事件流在傳播階段的位置

0:事件目前沒有發生。
1:事件目前處於捕獲階段。
2:事件到達目標節點。
3:事件處於冒泡階段。

  • event.type: 返回一個字串，表示事件型別，大小寫敏感;

  • event.timeStamp: 返回一個毫秒時間戳，表示事件發生的時間;

  • clientX、clientY : 獲取滑鼠事件觸發的X,Y座標

    事件物件

（2） 事件代理/委託屬性:

  • event.target：對事件觸發的引用，返回觸發事件發生的那個節點。（重點）
  • event.currentTarget：返回事件當前所在的節點，即正在執行的監聽函式所繫結的那個節點。（瞭解即可）
    var d = document.getElementById('d');
    d.onclick = function(e){
        //返回事件節點
        console.log(e.currentTarget);
        //返回觸發節點
        console.log(e.target);
    }

事件代理（事件委託）的含義：由於事件會在冒泡階段向上傳播到父節點，因此可以把子節點的監聽函式定義在父節點上，由父節點的監聽函式統一處理多個子元素的事件。這個方法叫做事件的代理也叫事件代理或者事件委託。

<head>
    <title></title>
    <meta charset="UTF-8">
    <style>
        div{padding: 40px}
        #div3{width: 300px;height: 300px;border: 1px solid red;}
        #div2{width: 200px;height: 200px;border: 1px solid red;}
        #div1{width: 100px;height: 100px;border: 1px solid red}
    </style>
</head>
<body>
    <div id="div3">div3
        <div id="div2">div2
            <div id="div1">div1</div>
        </div>
    </div>
</body>
<script>
    var d = document.getElementById('div3');
    d.onclick = function(e){
        e.target.style.background = 'red';
    }
</script>

根據上面的程式碼可以得到三個div的位置大概如下：點選每個div，每個div的整體就會變成紅色。主要是通過e.target返回了點選觸發的該節點。

（3）阻止瀏覽器預設行為和阻止事件傳播的方法

  • event.preventDefault()：該方法 阻止瀏覽器會執行當前事件的預設行為，比如點選連結後，瀏覽器跳轉到指定頁面；或者按一下空格鍵，頁面向下滾動一段距離。
  • event.stopPropagation()：該方法 阻止事件在DOM結構中繼續傳播，防止再觸發定義在別的節點上的監聽函式。
<body>
    <div id="div2">2
        <div id="div1">1
            <a id="a" href="百度2下">我的皎月聞越想聞</a>
        </div>
    </div>
</body>
<script>
    var d2 = document.getElementById('div2');
    var d1 = document.getElementById('div1');
    var a = document.getElementById('a');
    d2.onclick = function(e){
       alert('d2');
    }
    d1.onclick = function(e){
       alert('d1');
    }
    a.onclick = function(e){
        //阻止事件傳播
       e.stopPropagation();
       alert('a');
       //阻止瀏覽器預設行為
       e.preventDefault();
    }
</script>

使用事件物件，實現一個簡單的小案例：跟著滑鼠飛的div（通過修改事件物件的XY值）

<style>
    div {
        position: absolute;
        width: 50px;
        height: 50px;
      	background:pink;
        border-radius: 50%;
    }
</style>
<body>
   <div></div>
</body>
<script>
    var div = document.querySelector('div');
    div.onclick = function () {
        document.onmousemove = function (e) {
            div.style.left = e.clientX + 'px';
            div.style.top = e.clientY + 'px';
        }
    }
</script>

點選前（不動）

點選後（跟著滑鼠走）

相關文章