JavaScript DOM0，DOM1，DOM2级事件与 event 对象

最新推荐文章于 2022-05-27 11:42:30 发布

福州司马懿

最新推荐文章于 2022-05-27 11:42:30 发布

阅读量1.8k

点赞数 1

分类专栏： JavaScript

JavaScript 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

转自 https://www.cnblogs.com/holyson/p/3914406.html
转自 https://www.jianshu.com/p/ec25f838cc3d

0级 DOM

0 级 DOM 有两类

在标签内写onclick事件

<input id="myButton" type="button" value="Press Me" onclick="alert('thanks');" >

在JS写 onlicke = function（）{} 函数

document.getElementById("myButton").onclick = function () {
    alert('thanks');
}

1级 DOM（没有定义事件相关的内容）

DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。

2级 DOM

2级 DOM 中除了定义了一些 DOM 相关的操作之外还定义了一个事件模型，这个标准下的事件模型就是我们所说的2级DOM事件模型。它定义了两个方法用来添加和移除事件方法：addEventListener(event, function, useCapture) 和 removeEventListener(event, function, useCapture)。

它们都有三个参数：

事件名（如click）
事件处理程序函数
true则表示在捕获阶段调用；false表示在冒泡阶段调用。

addEventListener(): 可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。
removeEventListener():不能移除匿名添加的函数。

document.getElementById("myTest").attachEvent("onclick", function(){alert(1)});
//等价于
document.getElementById("myTest").addEventListener("click", function(){alert(1)}, false);

事件流的三种模型

1. 事件冒泡（常用）

IE中采用的事件流是事件冒泡，先从具体的接收元素，然后逐步向上传播到不具体的元素。

在这里插入图片描述

2. 事件捕获（少用）

Netscapte采用事件捕获，先由不具体的元素接收事件，最具体的节点最后才接收到事件。
在这里插入图片描述

3. DOM事件流

DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段。

即先捕获（从外层到内层），后冒泡（从内层到外层）

在这里插入图片描述

HTML常见事件

事件	触发条件
load	当页面完全加载后在window上触发，当图像加载完成后在img元素上触发，或当嵌入内容加载完成时，在object元素上触发
unload	页面完全卸载后在window上触发，或嵌入内容卸载后在object元素触发
select	用户选择文本框中的字符时触发
change	文本框焦点变化后其值改变时触发
submit	用户提交表单的时候触发
resize	窗口或框架大小变化的时候在window上触发
scroll	用户滚动带滚动条的元素时，在该元素上触发
focus	页面或元素获得焦点时在window及相应元素上触发
blur	页面或元素失去焦点时在window及相应元素上触发
beforeunload	页面卸载前在window上触发
mousewheel	不算HTML的，当用户通过鼠标滚轮与页面交互，在垂直方向滚动页面时触发

HTML 常用函数及属性

preventDefault
阻止默认行为。常用在点击链接时执行自定义方法而不跳转；或点击表单的提交按钮时不采用默认方式提交，转而执行自定义的事件。
stopPropagation
停止事件传递
stopImmediatePropagation
阻止事件冒泡并且阻止相同事件的后面定义的其他侦听器被调用
currentTarget
当前绑定事件的元素
target
触发事件的元素（最具体的元素）

<!DOCTYPE html>
<meta charset="utf8">
<html>
<body>
<div>
<p>paragraph</p>
</div>
<script>
const p = document.querySelector('p')
p.addEventListener("click", (event) => {
	alert("我是p元素上被绑定的第一个监听函数");
}, false);

p.addEventListener("click", (event) => {
	alert("我是p元素上被绑定的第二个监听函数");
	//event.stopPropagation();
	event.stopImmediatePropagation();
	//执行stopImmediatePropagation方法,阻止click事件冒泡,并且阻止p元素上绑定的其他click事件的事件监听函数的执行.
}, false);

p.addEventListener("click",(event) => {
	alert("我是p元素上被绑定的第三个监听函数");
	//该监听函数排在上个函数后面，该函数不会被执行
}, false);

document.querySelector("div").addEventListener("click", (event) => {
	alert("我是div元素,我是p元素的上层元素, target=" + event.target.tagName + ", currentTarget=" + event.currentTarget.tagName);
	//p元素的click事件没有向上冒泡，该函数不会被执行
}, false);
</script>
</body>
</html>