DOM事件流

時間 2019-12-07

標籤 dom 事件欄目 HTML 简体版

原文原文鏈接

DOM

DOM(Document Object Model) 全稱文檔對象模型. 文檔能夠是HTML, XML, 或者XHTML文檔.DOM定義的是一組與平臺和語言的接口. 目前造成了三個演進的標準, DOM Level 1, DOM Level 2, DOM Level 3. 每一個新的Level都是在原有的基礎之上增長了新的接口. javascript

能夠看到, 在DOM level 2裏引入了事件, 主要有EventTarget, Mouse等接口. DOM level 2裏主要引入了鍵盤事件.html

Event事件流

監聽器 target.addEventListener(type, listener[, useCapture])的第三個參數useCapture, 類型爲布爾, 默認爲false,表示事件觸發使用冒泡流. 先觸發內層元素的監聽器, 再觸發外層元素的監聽器. useCapture取值爲true時, 將先觸發外層元素的監聽器, 再觸發內層元素的監聽器.java

根據DOM2級事件規定
共有三個事件階段：捕獲階段、目標階段和睦泡階段。如在 dispatch以前調用stopPropagation() , 則將跳過全部階段
捕獲階段：事件對象經過目標的祖先從窗口傳播到目標的父對象。這個階段也被稱爲捕獲階段。spa

目標階段：事件對象(event object)到達事件對象的事件目標(event target)。這個階段也被稱爲at-target階段。若是事件類型指示事件不冒泡，則事件對象將在完成此階段以後中止。code

氣泡階段：事件對象以相反順序傳播目標的祖先，從event target的父對象開始，並以窗口結束。這個階段也稱爲冒泡階段。htm

配合代碼理解. 此處咱們點擊的對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="main">
        <div class="btn-wrap">
            <button id="btn">點擊</button>
        </div>
    <div>
    <script type="text/javascript">
        var btn=document.querySelector("#btn"),
            btnWrap=document.querySelector(".btn-wrap"),
            main=document.querySelector(".main"),
            body=document.querySelector("body"),
            html=document.querySelector("html");
            //冒泡
            btn.addEventListener("click",function(){
                console.log("你點擊了ID爲btn的button元素！");
            },false);
            btnWrap.addEventListener("click",function(){
                console.log("你點擊了class爲btn-wrap的DIV元素！");
            },false);
            main.addEventListener("click",function(){
                console.log("你點擊了class爲main的DIV元素！");
            },false);
            body.addEventListener("click",function(){
                console.log("你點擊了body元素！");
            },false);
            html.addEventListener("click",function(){
                console.log("你點擊了html元素！");
            },false);
            document.addEventListener("click",function(){
                console.log("你點擊了document對象！");
            },false);

            //捕獲
            btn.addEventListener("click",function(){
                console.log("你點擊了ID爲btn的button元素！");
            },true);
            btnWrap.addEventListener("click",function(){
                console.log("你點擊了class爲btn-wrap的DIV元素！");
            },true);
            main.addEventListener("click",function(){
                console.log("你點擊了class爲main的DIV元素！");
            },true);
            body.addEventListener("click",function(){
                console.log("你點擊了body元素！");
            },true);
            html.addEventListener("click",function(){
                console.log("你點擊了html元素！");
            },true);
            document.addEventListener("click",function(){
                console.log("你點擊了document對象！");
            },true);
    </script>
</body>
</html>

若是咱們點擊btn,也能夠視爲同時點擊了btn的容器元素, 甚至單擊了整個頁面. 由於咱們於每一級元素都添加了監聽器, 控制檯打印結果以下. blog

Event相關易混淆關鍵詞

eventTarget / event.Target
能用addEventListener方法添加事件監聽器的對象都是eventTarget.
Element，document 和 window 是最多見的eventTarget.接口

event.target, 是觸發當前事件的最小單位元素.事件
event.currentTarget / event.Target
event.target返回觸發事件的元素;event.currentTarget返回綁定事件的元素

具體的說就是event.currentTarget是註冊事件時所指向的元素，而event.target是響應事件的最小子元素，也就是最深層級的觸發事件的元素。

涉及到事件委託時, 這兩個所指的元素纔會不同.

參考:
https://www.cnblogs.com/johnn... DOM等級概述
https://www.w3.org/TR/DOM-Lev... W3C事件流

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。