JavaScript DOM 事件总结

76433橘子
223 阅读6分钟

JavaScript DOM 事件总结

前端 JavaScript DOM 和 BOM 学习目录

1. 认识DOM 和 BOM

2. DOM 操作节点、DOM 操作元素节点

3. DOM 获取任意元素 、节点类型、节点名称属性

4. DOM attribute property style属性 className属性 classList属性 Data

5. DOM 创建元素 移除元素 克隆元素

6. DOM 元素操作 window窗口操作

7. DOM Event事件

8. DOM 常用API事件总结

9. BOM 操作

10. JSON数据操作

developer.mozilla.org/zh-CN/docs/…查阅文档

同时还具有其他的事件类型

  1. 动画事件 用来实现的是我们的相应动态状态的改变事件
  2. 剪切板事件 用于内容事件剪切，赋值粘贴的事件
  3. 文本输入事件 和文本输入相关的事件
  4. CSS变换事件 当 CSS 变换开始、停止或取消等事件发生时发出通知
  5. 数据库事件 与数据库操作相关的事件：打开、关闭、事务、错误
  6. 拖放，滚动事件 拖动和滚轮事件派生自鼠标事件
  7. 焦点事件 与元素获得和失去焦点相关的事件
  8. 全屏事件 用于在全屏和窗口模式切换或切换期间发生错误时发送通知
  9. 游戏手柄事件 与 Gamepad API 相关的事件
  10. 手势事件
  11. 键盘事件 与使用键盘相关的事件
  12. 加载卸载文档事件 在加载或卸载文档时触发的事件
  13. 清单事件 与安装渐进式 web 应用清单相关的事件
  14. 媒体事件 与媒体使用（包括媒体捕捉与媒体流 API、Web Audio API、画中画 API，等等）相关的事件
  15. 消息事件 与窗口从另一个浏览上下文接受消息相关的事件
  16. 鼠标事件 与计算机鼠标相关的事件
  17. 网络连接事件 与获得和失去网络连接相关的事件
  18. 支付事件 与支付请求 API 相关的事件
  19. 性能事件 与任何性能相关的规范分组为 Performance API 的相关事件
  20. 网络套接字事件 与 WebSockets API 相关的事件
  21. 实时通讯事件 与 WebRTC API 相关的事件
  22. worker事件 与 Web Workers API、Service Worker API、Broadcast Channel API 和 Channel Messaging API 相关的事件

DOM 鼠标事件

属性名描述
click当用户点击时触发的事件
contextmenu当用户点击鼠标右键触发的功能
dbclick当用户双击鼠标触发的功能
mousedown鼠标按钮按下的时候触发的事件
mouseup鼠标按钮移除时触发的事件
mouseover鼠标移动到某个元素上的时候触发的事件（支持冒泡）
mouseout鼠标从某个元素上面移开触发的事件（支持冒泡）
mouseenter鼠标移动到某个元素上的时候触发的事件（不支持冒泡）
mouseleave鼠标从某个元素上面移开触发的事件（不支持冒泡）
mousemove鼠标被移开时候触发的事件
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
​
        .box:hover {
            background-color: darkred;
        }
    </style>
</head>
<body>
<div class="box"></div>
<script>
    /**
     * addEventListener
     * 注意我们监听事件的话是具有三种可选值的写入的
     * type 就是事件类型
     * listener 就是我们的鼠标实现监听事件的时候触发的事件函数
     * options 就是实现的是决定我们的事件流类型
     */
    var boxEl = document.querySelector(".box")
    // 开始实现添加不同的事件
    boxEl.addEventListener("click", function(event) {
        console.log(`${event.currentTarget}`);
    })
​
    boxEl.addEventListener("contextmenu", function(event) {
        console.log(`点击了打开了菜单`)
        event.preventDefault()
    })
​
    boxEl.addEventListener("mouseover", function(event) {
        event.currentTarget.classList.add("hover")
    })
​
    boxEl.addEventListener("mouseout", function(event) {
        event.currentTarget.classList.remove("hover")
    })
​
    boxEl.addEventListener("mousemove", function(event) {
        console.log("鼠标移动了")
        event.stopPropagation()
    })
​
    boxEl.addEventListener("mousedown", function(event) {
        console.log("鼠标按下了")
    })
​
    boxEl.addEventListener("mouseup", function(event) {
        console.log("鼠标抬起了")
    })
</script>
</body>
</html>

image-20241103224747068.png

DOM 键盘事件

属性描述
onkeydown键盘中某个按键被按下时触发的事件
onkeypress键盘中某个按键被按下时触发的事件
onkeyup键盘中某个按键被松开时触发的事件

down 这个按下的事件首先实现发生

press 发生在文本被输入的时候触发的事件

up 发生在文本输入完成的时候触发的事件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<input type="text">
​
<script>
    var inputEl = document.querySelector("input")
​
    inputEl.onkeydown = function(e) {
        console.log(`${e.currentTarget} 被点击了 `);
    }
​
    inputEl.onkeypress = function(e) {
        console.log(`${e.currentTarget} 正在输入内容`)
    }
​
    inputEl.onkeyup = function(e) {
        console.log(`${e.currentTarget} 输入内容完毕`)
    }
</script>
</body>
</html>

通过上面的例子我们就可以知道，事件触发的顺序就是： down -> press -> up

有的时候我们为了可以实现知道我们的键盘事件到底是什么

这个时候我们就可以实现使用 event 中的两个属性 event.key | event.code

注意的是，我们的 key 是需要进行区分大小写的

然而我们的 code 只是我们的键盘中的某些键浏览器对其进行的编码抽象，不区分大小写，这个就是我们的键码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
​
<script>
    window.addEventListener('keydown', function(e) {
        e.stopPropagation()
        console.log(e.code)
        switch (e.code) {
            case 'ArrowDown' || 'KeyS':
                console.log("用户点击了向下")
                break
​
            case 'ArrowUp' || 'KeyW':
                console.log("用户点击了向上")
                break
​
            case 'ArrowRight' || 'KeyD':
                console.log("用户点击了向右")
                break
​
            case 'ArrowLeft' || 'KeyA':
                console.log("用户点击了向左")
                break
        }
    })
</script>
</body>
</html>

image-20241103225133462.png

DOM 表单事件

属性描述
onchange当我们表单中的内容发生变化的时候触发的事件
oninput元素获取用户输入时触发的事件
onfocus元素实现获取焦点的时候触发的事件
onblur元素实现失去焦点时候触发的事件
onreset表单重置时触发的事件
onsubmit表单向后端提交数据时候触发的事件

oninput 事件和 onchange 事件的区别

oninput 事件，当我们的表单实现输入内容的时候，才实现触发，过程

onchange 事件，当我们的表单失去焦点的时候触发的事件，最终结果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
​
<form action="" method="POST">
    <input type="text">
    <button type="submit">搜索</button>
    <button type="reset" class="reset">重置</button>
</form>
​
<script>
    var formEl = document.querySelector('form');
    var inputEl = document.querySelector("input")
​
    // 获取焦点和失去焦点
    inputEl.addEventListener('focus', function (e) {
        console.log('focus 获取焦点');
    })
​
    inputEl.addEventListener('blur', function (e) {
        console.log('blur 表单失去焦点');
    })
​
    inputEl.addEventListener('input', function (e) {
        console.log('input 正在输入内容');
    })
​
    inputEl.addEventListener('change', function (e) {
        console.log('change 输入的内容正在发生变化');
    })
​
    formEl.addEventListener('reset', function (e) {
        alert("'reset 表单重置'")
        console.log('reset 表单重置');
    })
    formEl.addEventListener('submit', function (e) {
        console.log('submit 表单提交数据');
        alert('submit 表单提交数据')
    })
​
    // 注意我们的表单的提交默认是我们的 get 请求，这个时候，页面会全部瞬时刷新，后面我们就是使用的是我们的 ajax
    // 来实现提交我们的前端数据给后端的了
</script>
</body>
</html>

DOM 文档加载事件

我们的文档加载事件就是我们的文档实现加载的时候，我们的 script 标签的实现在我们的布局元素之前实现了书写

就是实现使用的是我们的 window.oncload = foo

这个时候就可以实现监听我们的文档的加载

DOMcontentloaded 就是实现的是我们的网页的内容实现加载完的触发的事件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script>
    // windwo.addEventListener("load", function (){
    //    
    // })
    
    window.onload = function() {
        
    }
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script>
    // 这个事件的监听就是实现的是只是加载完了我们的mHTML,并且实现构建了我们的 DOM Tree
    // 但是我们的外部资源： 图片img, 外部样式CSS，这个时候就是实现的是我们的调用这个部分的加载事件
    window.addEventListener("DOMContentLoaded", function(event) {
        console.log("HTML + DOM-Tree 加载完毕")
    })
​
    // 就是实现的我们的加载完了我们完整的 HTML，同时还实现加载完了我们的外部资源： 图片img，外部样式CSS
    // 这个时候就是实现的是使用后我们的 load 文档加载事件了
    window.addEventListener("load", function() {
        console.log("所有资源已经加载完毕")
    })
</script>
</body>
</html>
avatar
文章
阅读
粉丝