JavaScript与HTML交互详解及事件流原理-优快云博客

本文链接：https://blog.youkuaiyun.com/liyong313/article/details/84526287

本文深入解析了JavaScript如何与HTML进行交互，详细介绍了JavaScript的Event对象及其属性，包括事件类型、事件源、鼠标事件属性、按键事件属性等。文章还详细解释了事件流的概念，包括冒泡事件流、不冒泡事件流和事件流的三个阶段：捕获、目标、冒泡。此外，文章还讨论了事件类型和事件处理程序的添加与移除，以及如何使用事件处理程序来响应用户的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript与HTML之间的交互是通过事件来实现的

JavaScript的Event对象详解

属性	类型	描述
type	String	事件的类型，如onlick中的click
srcElement/target		事件源，就是发生事件的元素
button		声明被按下的鼠标键，整数，1代表左键，2代表右键，4代表中键，如果按下多个键，酒把这些值加起来，所以3就代表左右键同时按下；（firefox中 0代表左键，1代表中间键，2代表右键）
clientX/clientY		事件发生的时候，鼠标相对于浏览器窗口可视文档区域的左上角的位置(在DOM标准中，这两个属性值都不考虑文档的滚动情况，也就是说，无论文档滚动到哪里，只要事件发生在窗口左上角，clientX和clientY都是 0，所以在IE中，要想得到事件发生的坐标相对于文档开头的位置，要加上 document.body.scrollLeft和 document.body.scrollTop)
offsetX,offsetY/layerX,layerY		事件发生的时候，鼠标相对于源元素左上角的位置
x,y/pageX,pageY		检索相对于父元素鼠标水平坐标的整数
altKey,ctrlKey,shiftKey等		返回一个布尔值
keyCode		返回keydown何keyup事件发生的时候按键的代码，以及keypress 事件的Unicode字符；(firefox2不支持 event.keycode，可以用 event.which替代 )
fromElement,toElement		前者是指代mouseover事件中鼠标移动过的文档元素，后者指代mouseout事件中鼠标移动到的文档元素；
cancelBubble		一个布尔属性，把它设置为true的时候，将停止事件进一步起泡到包容层次的元素；(e.cancelBubble = true; 相当于 e.stopPropagation();)
returnValue		一个布尔属性，设置为false的时候可以组织浏览器执行默认的事件动作；(e.returnValue = false; 相当于 e.preventDefault();)
screenX、screenY		鼠标指针相对于显示器左上角的位置，如果你想打开新的窗口，这两个属性很重要
bubbles	Boolean	表明事件是否冒泡
eventPhase	Inetger	调用事件处理程序的阶段：1 捕获 2 目标 3 目标
currentTarget	Element	事件处理程序当前正在处理的那个元素
target	Element	事件的目标
defaultPrevente	Boolean	为true表示已经调用了preventDefault()
preventDefault()	Function	取消事件的默认行为eg.取消单击<a>元素时导航到href指定的url。如果cancelable是true，可以使用这个方法
stopPropagation()	Function	取消事件的进一步捕获或冒泡。如果bubbles为true可以调用这个方法。

事件流：从页面接受事件的顺序。动作，点击页面中的input元素
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" value="点击我" id="my"/>
</body>
</html>
```
1）冒泡事件流，即事件由具体的元素接受，然后逐级向上传播到较为不具体的节点；input->body->html->document。2）不具体的节点应该更早接受到事件，而具体的节点应该最后接受到事件;document->html->body->input
"DOM2即事件"规定事件包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡。在DOM事件流中，实际的目标（<input>元素）在捕获阶段不会接受到事件。意味着捕获阶段从document->html->body。下一个阶段为处于目标阶段，于是事件在目标上发生，并且事件处理中被看成冒泡阶段的一部分。然后冒泡阶段发生，事件又传回文档。
事件就是用户或浏览器自身执行的某种动作，eg.click、load和mouseover。而响应时间的函数就做事件处理程序（或事件侦听器）。

通过addEventListener()添加的事件处理程序只能使用 removeEventListener()来移除；移除时传入的参数与添加处理程序是使用的参数相同，即addEventListener()添加的匿名函数将无法移除。eg.

function myClick(event){
	alert(event.type);
	console.warn("event : ",event);
	this.removeEventListener("click",myClick,false);
}
var my = document.getElementById("my");
my.addEventListener("click",myClick,false);  //在冒泡阶段处理实际
//my.addEventListener("click",myClick,true);    //在捕获阶段处理实际

事件类型：焦点事件、鼠标事件、滚轮事件、文本事件、键盘事件、合成事件、变动（mutation）事件。.
变动（mutation）事件:当底层DOM结构发生变化时触发的事件