DOM事件机制-下篇

扶光~

于 2024-08-29 20:11:05 发布

阅读量354

点赞数 9

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/huangzitaoyyds/article/details/141687250

版权

上篇-事件流、事件处理程序、事件对象

1.事件委托

事件委托就是当事件触发时，把要做的事委托给父元素（或父元素的父元素）来处理。也就是：利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作。使用事件委托技术能让你避免对特定的每个节点添加事件监听器。

事件委托利用事件冒泡，可以只使用一个事件处理程序来管理一种类型的事件。例如，click 事件冒泡到 document。这意味着可以为整个页面指定一个 onclick 事件处理程序，而不用为每个可点击元素分别指定事件处理程序。比如有以下HTML：

<ul id="myLinks">
 <li id="li1">Go somewhere</li>
 <li id="li2">Do something</li>
 <li id="li3">Say hi</li>
 </ul>
<script>
 var list = document.getElementById("myLinks");
list.addEventListener("click", function (event) {
 var target = event.target;
 console.log(target);
 switch (target.id) {
 case "li1":
 target.innerHTML = 'SuZhou';
 break;
 case "li2":
 target.innerHTML = 'Coding';
 break;
 case "li3":
 target.innerHTML = 'Hi';
 break;
 }
 });
 </script>

这里只给元素添加了一个 onclick 事件处理程序。因为所有列表项都是这个元素的后代，所以它们的事件会向上冒泡，最终都会由这个函数来处理。但事件目标是每个被点击的列表项，只要检查 event 对象的 id 属性就可以确定，然后再执行相应的操作即可。相对于前面不使用事件委托的代码，这里的代码不会导致先期延迟，因为只访问了一个 DOM 元素和添加了一个事件处理程序。结果对用户来说没有区别，但这种方式占用内存更少。所有使用按钮的事件（大多数鼠标事件和键盘事件）都适用于这个解决方案。

事件委托具有如下优点

document 对象随时可用，任何时候都可以给它添加事件处理程序（不用等待 DOMContentLoaded或 load 事件）。这意味着只要页面渲染出可点击的元素，就可以无延迟地起作用。

节省花在设置页面事件处理程序上的时间。只指定一个事件处理程序既可以节省 DOM 引用，也可以节省时间。减少整个页面所需的内存，提升整体性能。

最适合使用事件委托的事件包括：click、mousedown、mouseup、keydown 和 keypress。

2.事件类型

用户界面事件（UIEvent）：涉及与 BOM 交互的通用浏览器事件。

焦点事件（FocusEvent）：在元素获得和失去焦点时触发。

鼠标事件（MouseEvent）：使用鼠标在页面上执行某些操作时触发。

滚轮事件（WheelEvent）：使用鼠标滚轮（或类似设备）时触发。

键盘事件（KeyboardEvent）：使用键盘在页面上执行某些操作时触发。

输入事件（InputEvent）：向文档中输入文本时触发。

1.用户界面事件-UIEvent

load 在 window 上当页面加载完成后触发，在窗套（）上当所有窗格（）都加载完成后触发，在元素上当图片加载完成后触发，在元素上当相应对象加载完成后触发。

<script>
 window.onload = function () {
 console.log('onload');
 }
 </script>

unload 当页面完全卸载后在window上触发，当所有框架都卸载后在框架集上触发，当嵌入的内容卸载完毕后在上触发。

select 在文本框（或 textarea）上当用户选择了一个或多个字符时触发。

<input type="text" id="inp">
 <script>
 var inp = document.getElementById('inp');
 inp.onselect = function (event) {
 console.log(event);
 // 可以通过window.getSelection()获取到选中的部分
console.log(window.getSelection().toString());
 }
 </script>

resize 在 window 或窗格上当窗口或窗格被缩放时触发。

<body onresize="myFun()">
 <script>
 function myFun() {
 console.log(window.outerHeight, window.outerWidth);
 }
 </script>
 </body>

scroll 当用户滚动包含滚动条的元素时在元素上触发。元素包含已加载页面的滚动条。大多数 HTML 事件与 window 对象和表单控件有关。

<div id="d1" style="width: 100px;height: 100px;border: 1px solid; overflow: 
auto;">我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签我
是div标签我是div标签我是div标签我是div标签</div>
 <script>
 var d1 = document.getElementById('d1');
 d1.onscroll = function () {
 console.log('onscroll');
 }
 </script>

2.焦点事件-FocusEvent

blur 当元素失去焦点时触发。这个事件不冒泡，所有浏览器都支持。

focus 当元素获得焦点时触发。这个事件不冒泡，所有浏览器都支持。

<input type="text" id="inp1">
 <script>
 var inp1 = document.getElementById('inp1');
 // 失去焦点触发
inp1.onblur = function () {
 console.log('失去焦点');
 console.log(this.value);
 }
 // 获得焦点触发
inp1.onfocus = function () {
 console.log('获得焦点');
 }
 </script>

focusin 当元素获得焦点时触发。这个事件是 focus 的冒泡版。

focusout 当元素失去焦点时触发。这个事件是 blur 的冒泡版。

3.鼠标事件-MouseEvent和鼠标滚轮事件-WheelEvent

click 在用户单击鼠标主键（通常是左键）或按键盘回车键时触发。这主要是基于无障碍的考虑，让键盘和鼠标都可以触发 onclick 事件处理程序。

dblclick 在用户双击鼠标主键（通常是左键）时触发。

mousedown 在用户按下任意鼠标键时触发。这个事件不能通过键盘触发。

mouseenter 在用户把鼠标光标从元素外部移到元素内部时触发。这个事件不冒泡，也不会在光标经过后代元素时触发。

mouseleave 在用户把鼠标光标从元素内部移到元素外部时触发。这个事件不冒泡，也不会在光标经过后代元素时触发。

mousemove 在鼠标光标在元素上移动时反复触发。这个事件不能通过键盘触发。

mouseout 在用户把鼠标光标从一个元素移到另一个元素上时触发。移到的元素可以是原始元素的外部元素，也可以是原始元素的子元素。这个事件不能通过键盘触发。

mouseover 在用户把鼠标光标从元素外部移到元素内部时触发。这个事件不能通过键盘触发。

mouseup 在用户释放鼠标键时触发。这个事件不能通过键盘触发。

mousewheel 鼠标滚轮事件

<!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>
 <style>
 #d1{
 width: 300px;
 height: 300px;
 background-color: aqua;
 }
 </style>
 </head>
 <body>
 <div id="d1"></div>
 <script>
 var d1 = document.getElementById('d1');
 // 单击事件
d1.onclick = function (event) {
 console.log('click');
 console.log(event);
 }
 // 双击事件
d1.ondblclick = function () {
 console.log('dblclick');
}
 // 鼠标移入事件
d1.onmouseenter = function () {
 console.log('mouseenter');
 }
 // 鼠标移出事件
d1.onmouseleave = function () {
 console.log('mouseleave');
 }
 // 鼠标在元素内部移动时触发
d1.onmousemove = function () {
 console.log('mousemove');
 }
 </script>
 </body>
 </html>

4.键盘事件-KeyboardEvent与输入事件-InputEvent

键盘事件包含 3 个事件：

keydown，用户按下键盘上某个键时触发，而且持续按住会重复触发。

keypress，用户按下键盘上某个键并产生字符时触发，而且持续按住会重复触发。Esc 键也会触发这个事件。DOM3 Events 废弃了 keypress 事件，而推荐 textInput 事件。

keyup，用户释放键盘上某个键时触发，输入事件只有一个，即 textInput。这个事件是对 keypress 事件的扩展。

textInput 会在文本被插入到文本框之前触发。当用户按下键盘上的某个字符键时，首先会触发 keydown 事件，然后触发 keypress 事件，最后触发 keyup 事件。注意，这里 keydown 和 keypress 事件会在文本框出现变化之前触发，而 keyup事件会在文本框出现变化之后触发。如果一个字符键被按住不放，keydown 和 keypress 就会重复触发，直到这个键被释放。对于非字符键，在键盘上按一下这个键，会先触发 keydown 事件，然后触发 keyup 事件。如果按住某个非字符键不放，则会重复触发 keydown 事件，直到这个键被释放，此时会触发 keyup 事件。

<!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>
 </head>
 <body>
 <input type="text" id="inp1">
 <script>
 var inp1 = document.getElementById('inp1');
// 按下某个按键是触发
inp1.onkeydown = function (event) {
 if (event.keyCode == 13) {
 console.log('确认');
 console.log(this.value);
 }
 }
 // 按下键盘上某个键并产生字符时触发，而且持续按住会重复触发
inp1.onkeypress = function (event) {
 console.log(event.keyCode);
 }
 // 用户释放键盘上某个键时触发
inp1.onkeyup = function (event) {
 console.log(event.keyCode);
 }
 // 键盘输入事件 必须使用DOM2级事件
inp1.addEventListener('textInput', function (event) {
 console.log(event.data);
 })
 </script>
 </body>
 </html>