DOM事件類

weixin_33762321發表於2018-10-20
事件

什麼是DOM事件類？下面來梳理一下。

  • DOM事件的級別
  • DOM事件模型
  • DOM事件流
  • 描述DOM事件捕獲的具體流程
  • Event物件的場景應用
  • 自定義事件

（一）DOM事件的級別

DOM0 element.onclick = function(){}
DOM2 element.addEventListener('click',function(){},false)
DOM3 element.addEventListener('keyup')
複製程式碼

（二）DOM事件模型

  • 捕獲 (捕獲自上而下)
  • 冒泡 (冒泡自下而上)

（三）DOM事件流

事件流描述的是從頁面中接受事件的順序 - 摘自《JavaScript 高階程式設計 第三版》

瀏覽器在這個當前的頁面做互動的過程中，例如我點選了滑鼠的左鍵，這個左鍵是怎樣傳到這個頁面上的，這就是事件流，它是怎樣進行響應的，一個完整的事件流分三個階段。

  • 第一階段是捕獲
  • 第二階段是目標階段
  • 第三階段是冒泡

（四）描述DOM事件捕獲的具體流程

事件捕獲的思想是不太具體的節點更早接收到事件，而最具體的節點應該最後接收到事件。事件捕獲的用意在於在事件達到預定目標之前捕獲它。

以下面的HTML頁面為例：

<!DOCTYPE html>
<html>
    <head>
        <title>事件捕獲</title>
    </head>
    <body>
        <div id="myDIV">Click Me</div>
    </body>
</html>
</html>
複製程式碼

如果你點選了頁面中

元素，那麼這個click事件會按照如下順序傳播：

  1. document
  2. <html>
  3. <body>
  4. <div>

在事件捕獲過程中，document物件首先接收到click事件，然後DOM樹依次向下，一直傳播 到事件的實際目標，即<div>元素，圖13-2展示了事件捕獲的過程(這圖是我從《JavaScript 高階程式設計 第三版》)拍下來的，將就看一下吧。

最後還是想補充一下，整個捕獲事件的程式碼的流程是怎樣實現的

<!---->這裡是HTML的程式碼
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Event</title>
        <style>
            #ev {
                width: 300px;
                height: 100px;
                background: red;
                color： #fff;
                text-align: center;
                line-height: 100px;
            }
        </style>
    </head>
    <body>
        <div id="ev">
            目標元素
        </div>
        <script>
            var ev = document.getElementByID('ev');
            window.addEventListener('click',function(){
                console.log('window captrue');
            },true)
            document.addEventListener('click',function(){
                console.log('document captrue');
            },true)
            document.documentElement.addEventListener('click',function(){
                console.log('documentElement captrue');
            },true)
            document.body.addEventListener('click',function(){
                console.log('body captrue');
            },true)
            ev.addEventListener('click',function(){
                console.log('ev captrue');
            },true)
        </script>
    </body>
</html>
複製程式碼

最後事件捕獲的順序： window->document->html->body->div

（五）Event物件的場景應用

在觸發DOM上的某個事件時，會產生一個事件物件event，這個物件中包含著所有與事件有關的資訊。包括導致事件的元素、事件的型別以及其他與特定事件相關的資訊。例如，滑鼠操作導致的事件物件中，會包含滑鼠位置的資訊，而鍵盤操作導致的事件物件中，會包含與按下的鍵有關的資訊。所有瀏覽器都支援event物件，但支援方式不同。

  1. event.preventDefault

取消事件的預設行為

  1. event.stopImmediatePropagation()

取消事件的進一步捕獲或冒泡，同時阻止任何事件處理程式被呼叫

  1. event.stopPropagation()

取消事件的進一步捕獲或冒泡

  1. event.target

事件的目標,當前被點選的事件

  1. event.currentTarget

當前被繫結的事件，表示的是父級元素的事件

（六）自定義事件

var eve = new Event('custome');
ev.addEventListener('custome',function(){
    console.log('custome');
})
ev.dispatchEvent(eve);
複製程式碼

自定義事件的程式碼：

<!---->這裡是HTML的程式碼
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Event</title>
        <style>
            #ev {
                width: 300px;
                height: 100px;
                background: red;
                color： #fff;
                text-align: center;
                line-height: 100px;
            }
        </style>
    </head>
    <body>
        <div id="ev">
            目標元素
        </div>
        <script>
            var ev = document.getElementByID('ev');
            var eve = new Event('test'); // 例項化一個自定義事件
            ev.addEventListener('test',function(){
                console.log('test dispatch');    
            })
            ev.dispatchEvent(eve);
        </script>
    </body>
</html>
複製程式碼

相關文章