本文详细介绍了DOM事件机制，包括事件流（事件冒泡、事件捕获和DOM事件流）、事件处理程序（HTML事件处理程序、DOM0事件处理程序和DOM2事件处理程序）、事件对象、阻止默认事件和事件委托的概念和应用。此外，还探讨了各种常见的事件类型，如用户界面事件、焦点事件、鼠标事件、键盘事件和输入事件，以及它们在实际开发中的应用场景。
事件机制
HTML DOM 允许 JavaScript 对 HTML 事件作出反应。JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。
为了在用户点击元素时执行代码，请向 HTML 事件属性添加 JavaScript 代码：
<div id='div1'>我是一个div</div>
<button id='btn'>点我啊</button>
<!-- 还可以在HTML标签中进行事件的绑定 需要加()-->
<button id='btn2' onclick="clickFun()">点我啊2</button>
<script>
// 点击按钮，改变div的内容，大小，背景颜色
// 分别获取div和button的节点
var div = document.getElementById('div1');
var btn = document.getElementById('btn');
// 如需向 HTML 元素分配事件，您能够使用事件属性。给按钮节点绑定点击事件
btn.onclick = function () {
div.innerHTML = '点击按钮改变的';
div.style.width = '200px';
div.style.height = '200px';
div.style.backgroundColor = 'red';
}
// 执行在btn2中绑定的事件
function clickFun() {
console.log('我是btn2绑定的事件');
}
</script>JavaScript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
事件是由三部分组成
事件源 事件类型 事件处理程序 我们也称为事件三要素 1.事件源：事件被触发的对象 -->按钮对象 2.事件类型：如何触发？触发什么事件？例如鼠标点击，键盘按下等… 3.事件处理程序：通过一个函数赋值的方式
执行事件的步骤
1.获取事件源 2.注册事件（绑定事件） 3.采用函数赋值形式添加事件处理程序
常用事件：
-
当用户点击鼠标时
-
当网页加载后
-
当图像加载后
-
当鼠标移至元素上时
-
当输入字段被改变时
-
当 HTML 表单被提交时
-
当用户敲击按键时
-
。。。
1.事件流
在第四代 Web 浏览器（IE4 和 Netscape Communicator 4）开始开发时，开发团队碰到了一个有意思的问题：页面哪个部分拥有特定的事件呢？要理解这个问题，可以在一张纸上画几个同心圆。把手指放到圆心上，则手指不仅是在一个圆圈里，而且是在所有的圆圈里。两家浏览器的开发团队都是以同样的方式看待浏览器事件的。当你点击一个按钮时，实际上不光点击了这个按钮，还点击了它的容器以及整个页面。
事件流描述了页面接收事件的顺序。结果非常有意思，IE 和 Netscape 开发团队提出了几乎完全相反的事件流方案。IE 将支持事件冒泡流，而 Netscape Communicator 将支持事件捕获流。
1.1.事件冒泡(IE事件流)
IE 事件流被称为事件冒泡，这是因为事件被定义为从最具体的元素（文档树中最深的节点）开始触发，然后向上传播至没有那么具体的元素（文档）。
例如：
<!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>
*{
color: white;
font-size: 20px;
}
#outer{
width: 300px;
height: 300px;
background-color: red;
}
#center{
width: 200px;
height: 200px;
background-color: blue;
}
#inner{
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div id="outer">outer
<div id="center">center
<div id="inner">inner</div>
</div>
</div>
<script>
var inner = document.getElementById('inner');
var center = document.getElementById('center');
var outer = document.getElementById('outer');
// 当我们只有一个inner点击方法的时候 我们发现想要实现的效果和我们预期的一样
inner.onclick = function () {
console.log('我是inner点击的');
}
// 但是当我们给inner的父元素和祖先元素也添加点击事件时 一点击inner 所有祖先元素的事件都会被触发，这就是事件冒泡现象
center.onclick = function () {
console.log('我是center点击的');
}
outer.onclick = function () {
console.log('我是outer点击的');
}
</script>
</body>
</html>
在点击页面中的id为inner的div元素，click事件会以如下顺序发生
-
div#inner
-
div#center
-
div#outer
-
body
-
html
-
document
也就是说，div#inner元素，即被点击的元素，最先触发 click 事件。然后，click 事件沿DOM 树一路向上，在经过的每个节点上依次触发，直至到达 document 对象。
所有现代浏览器都支持事件冒泡，只是在实现方式上会有一些变化。IE5.5及早期版本会跳过html元素（从body直接到 document）。现代浏览器中的事件会一直冒泡到 window 对象。
阻止事件冒泡
使用阻止事件冒泡之前，先要知道DOM事件默认提供的一个对象，HTML DOM Event对象。
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！
最低0.47元/天 解锁文章
380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
