「微博客」DOM 0级事件 及 DOM 2级事件

发布于 2023-06-11  62 次阅读

Contents
  1. DOM 0级事件
  2. DOM 2级事件
  3. 事件对象event
  4. 一些常见的事件类型

DOM 0级事件

把onclick = "..."写在标签内或者用element.onclick = ...语句绑定onclick事件，都是dom0级事件，执行的时候第二个会覆盖第一个onclick。（一般来说，行内的onclick="..."先执行，然后会被其他地方的element.onclick = ...js语句覆盖）

DOM 2级事件

用jquery添加的事件和用原生的element.addEventListener(...)添加的事件，都是dom2级事件，不会覆盖，会按照添加监听的顺序依次执行。

DOM 0级事件 和 DOM 2级事件的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        onload = () => {
            console.log('-------------------onload---------------------');
            let ele = document.querySelector('.box1');

            ele.addEventListener('click', () => {
                console.log('DOM 2级事件');
            })

            ele.addEventListener('click', () => {
                console.log('DOM 2级事件2');
            })

            ele.onclick = () => {console.log('DOM 0级事件2')};
        }
    </script>    
</head>
<body>
    <div class="box1" onclick="console.log('DOM 0级事件')">hello</div>
</body>
</html>

控制台输出结果：

%E6%88%AA%E5%B1%8F2023-06-11%2015.28.08.png

DOM2级的事件规定了事件流包含三个阶段

  1. 捕获阶段（Capture Phase）：事件从文档根节点（document）开始向下传播，逐级进入目标元素的父元素。在捕获阶段，事件会依次经过目标元素的所有祖先元素。
  2. 目标阶段（Target Phase）：事件到达目标元素本身。在目标阶段，事件处理程序可以触发并对事件做出响应。
  3. 冒泡阶段（Bubbling Phase）：事件从目标元素开始向上传播，逐级返回到文档根节点。在冒泡阶段，事件会依次经过目标元素的所有祖先元素。

当发生一个事件时，它会按照捕获阶段、目标阶段和冒泡阶段的顺序在DOM结构中传递。默认情况下，大多数事件会经历所有三个阶段。但是，可以使用addEventListener方法的第三个参数来控制事件的传播方式。通过将该参数设置为true，事件将在捕获阶段处理；设置为false（默认值），事件将在冒泡阶段处理。

以下是一个示例，演示了DOM事件分级的应用：

var element = document.getElementById("myElement");

element.addEventListener("click", function(event) {
  console.log("目标阶段：点击了元素");
}, false);

document.addEventListener("click", function(event) {
  console.log("冒泡阶段：点击了文档");
}, false);

document.documentElement.addEventListener("click", function(event) {
  console.log("捕获阶段：点击了文档根节点");
}, true);

在上述示例中，当点击"myElement"元素时，会依次触发捕获阶段、目标阶段和冒泡阶段的事件处理程序。控制台输出将是：

捕获阶段：点击了文档根节点
目标阶段：点击了元素
冒泡阶段：点击了文档

事件对象event

无论在DOM0还是DOM2还是DOM3中都会在事件函数中传入事件对象。

事件对象event下的属性和方法：

因为各个浏览器的事件对象不一样, 把主要的时间对象的属性和方法列出来;
bubble ：    表明事件是否冒泡
cancelable ：  表明是否可以取消冒泡
currentTarget ： 当前时间程序正在处理的元素, 和this一样的;
defaultPrevented： false ，如果调用了preventDefualt这个就为真了;
detail： 与事件有关的信息(滚动事件等等)
eventPhase： 如果值为1表示处于捕获阶段， 值为2表示处于目标阶段，值为三表示在冒泡阶段
target || srcElement： 事件的目标
trusted： 为ture是浏览器生成的，为false是开发人员创建的（DOM3）
type ： 事件的类型
view ： 与元素关联的window， 我们可能跨iframe；
preventDefault()    取消默认事件；
stopPropagation() 取消冒泡或者捕获；
stopImmediatePropagation() (DOM3)阻止任何事件的运行；
//stopImmediatePropagation阻止 绑定在事件触发元素的 其他同类事件的callback的运行

IE下的事件对象是在window下的，而标准应该作为一个参数, 传为函数第一个参数;
IE的事件对象定义的属性跟标准的不同，如：
cancelBubble 默认为false, 如果为true就是取消事件冒泡;
returnValue 默认是true，如果为false就取消默认事件;
srcElement, 这个指的是target, Firefox下的也是srcElement;

一些常见的事件类型

  1. 鼠标事件：

    • click: 鼠标点击事件
    • mouseover: 鼠标移入元素事件
    • mouseout: 鼠标移出元素事件
    • mousedown: 鼠标按下事件
    • mouseup: 鼠标松开事件
    • mousemove: 鼠标移动事件
    • mouseenter: 鼠标进入元素事件
    • mouseleave: 鼠标离开元素事件
    • contextmenu: 右键点击事件
    • dblclick: 双击事件

  2. 键盘事件：

    • keydown: 键盘按下事件
    • keyup: 键盘松开事件
    • keypress: 键盘按键事件

  3. 表单事件：

    • submit: 表单提交事件
    • input: 输入框内容变化事件
    • change: 输入框内容改变事件
    • focus: 元素获取焦点事件
    • blur: 元素失去焦点事件
    • select: 文本选中事件

  4. 文档加载事件：

    • DOMContentLoaded: HTML 文档加载完成事件
    • load: 网页资源（如图片、脚本）加载完成事件
    • beforeunload: 离开页面或关闭窗口事件

  5. 视图事件：

    • resize: 窗口大小改变事件
    • scroll: 滚动事件

  6. 多媒体事件：

    • play: 媒体播放事件
    • pause: 媒体暂停事件
    • ended: 媒体播放结束事件

  7. 触摸事件（移动设备）：

    • touchstart: 触摸开始事件
    • touchmove: 触摸移动事件
    • touchend: 触摸结束事件

A Student on the way to full stack of Web3.