DOM事宜流

2019年8月22日 153次阅读 来源: 开罐之王777

DOM

DOM(Document Object Model) 全称文档对象模子. 文档可所以HTML, XML, 或许XHTML文档.DOM定义 的是一组与平台和言语的接口. 现在形成了三个演进的规范, DOM Level 1, DOM Level 2, DOM Level 3. 每一个新的Level都是在原有的基本之上增加了新的接口.

《DOM事宜流》

能够看到, 在DOM level 2里引入了事宜, 重要有EventTarget, Mouse等接口. DOM level 2里重要引入了键盘事宜.

Event事宜流

监听器 target.addEventListener(type, listener[, useCapture])的第三个参数useCapture, 范例为布尔, 默以为false,示意事宜触发运用冒泡流. 先触发内层元素的监听器, 再触发外层元素的监听器. useCapture取值为true时, 将先触发外层元素的监听器, 再触发内层元素的监听器.

依据DOM2级事宜划定
共有三个事宜阶段：捕捉阶段、目的阶段和气泡阶段。如在 dispatch之前挪用stopPropagation() , 则将跳过一切阶段
捕捉阶段：事宜对象经由过程目的的先人从窗口流传到目的的父对象。这个阶段也被称为捕捉阶段。

目的阶段：事宜对象(event object)抵达事宜对象的事宜目的(event target)。这个阶段也被称为at-target阶段。假如事宜范例指导事宜不冒泡，则事宜对象将在完成此阶段以后住手。

气泡阶段：事宜对象以相反递次流传目的的先人，从event target的父对象最先，并以窗口完毕。这个阶段也称为冒泡阶段。

《DOM事宜流》

合营代码明白. 此处我们点击的

<!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的容器元素, 以至单击了全部页面. 由于我们于每一级元素都增加了监听器, 控制台打印效果以下.

《DOM事宜流》

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事宜流

    原文作者：开罐之王777
    原文地址: https://segmentfault.com/a/1190000015663330
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞