HTML DOM - 事件
HTML DOM(文档对象模型)是一种用来操作HTML文档的编程接口。在HTML DOM中,事件是发生在HTML元素上的行为,比如单击鼠标、按下键盘等操作。当用户触发一个事件,浏览器就会调用已经注册了该事件的函数。
事件流
HTML DOM定义了事件流,它描述了从事件被触发到被处理的一系列过程。事件可以在捕获阶段或冒泡阶段被处理。捕获阶段是指从文档根节点到事件触发的元素,冒泡阶段是指从事件触发的元素到文档根节点。默认情况下,事件是在冒泡阶段处理的。可以通过 event.stopPropagation()
方法来阻止事件冒泡。
事件类型
HTML DOM定义了许多事件类型,比如单击、双击、鼠标移动等。下面列出了一些常见的事件类型:
- click:用户在元素上单击鼠标(移动设备上为轻触)
- dblclick:用户在元素上双击鼠标(移动设备上为双指轻触)
- mouseover:鼠标移到元素上时触发
- mouseout:鼠标从元素上移开时触发
- mousedown:鼠标按下时触发
- mouseup:鼠标松开时触发
- keydown:按下键盘时触发
- keyup:松开键盘时触发
- focus:元素获得焦点时触发
- blur:元素失去焦点时触发
- load:页面或图片加载完成时触发
- resize:浏览器窗口大小改变时触发
事件属性
在HTML DOM中,事件是将某种操作和回调函数绑定在元素上的。事件还有一些特定的属性,可以在回调函数中获取事件的一些信息。下面列出了一些常见的事件属性:
- event.target:事件发生的目标元素
- event.type:事件类型
- event.pageX / event.pageY:鼠标指针相对于文档左上角的x、y坐标
- event.keyCode:按下的键盘按键的字符编码
- event.which:按下的键盘按键的ASCII码
- event.preventDefault():取消事件的默认行为
- event.stopPropagation():停止事件冒泡
注册事件
在HTML DOM中,可以使用 addEventListener()
方法来注册事件。它接受三个参数:事件类型、回调函数和一个布尔值,表示是否在捕获阶段处理事件。
例如在以下代码中,当用户单击按钮时,会调用 changeText()
函数:
<button id="myButton">Click me</button>
<script>
document.getElementById("myButton").addEventListener("click", changeText);
function changeText() {
document.getElementById("myButton").innerHTML = "Clicked!";
}
</script>
移除事件
可以使用 removeEventListener()
方法来移除事件。它接受与 addEventListener()
方法相同的参数。注意,在移除事件时,回调函数必须是一个命名函数,而不是匿名函数。
例如在以下代码中,当用户单击按钮时,会调用 changeText()
函数。在第5行代码中,移除了这个事件处理程序:
<button id="myButton">Click me</button>
<script>
document.getElementById("myButton").addEventListener("click", changeText);
function changeText() {
document.getElementById("myButton").innerHTML = "Clicked!";
document.getElementById("myButton").removeEventListener("click", changeText);
}
</script>
小结
HTML DOM中的事件是在元素上发生的行为。开发人员可以通过注册事件来执行某些操作,也可以获取事件的属性来处理事件。在移除事件时,需要记住回调函数必须是一个命名函数。通过HTML DOM的事件机制,开发人员可以实现基于交互的动态web应用程序。