js DOM的事件常见操作实例详解

js DOM的事件常见操作实例详解

前言

在web开发中，dom事件是我们经常会遇到的部分。在dom事件中，我们可以监听各种事件，如点击，键盘输入等。本文将对常见的dom事件进行详细的介绍，并提供常见操作的实例。

常见的DOM事件

以下是一些常见的DOM事件：
- 鼠标事件：mousedown, mouseup, click, dblclick, mouseover, mouseout。
- 键盘事件：keydown, keyup, keypress。
- 表单事件：submit, reset, change, focus, blur。
- 加载事件：load, unload, ready, resize。
- 画布事件：paint, resize, scroll。
- 焦点事件：blur, focus。

监听事件

我们可以在JS中通过addEventListener()方法来监听事件，如下代码所示：

document.getElementById("myBtn").addEventListener("click", function() {
  alert("Hello World!");
});

以上代码表示监听了id为myBtn的元素，当该元素被点击时弹出一个消息框提示“Hello World！”。

阻止事件传递

在某些情况下，我们不希望某个事件向外部传递，我们可以通过stopPropagation()方法来实现，如下代码所示：

document.getElementById("myBtn").addEventListener("click", function(event) {
  event.stopPropagation();
  alert("Hello World!");
});

以上代码仅会弹出一个消息框，并且不会向父级元素传递事件。

取消默认行为

有一些事件在默认情况下会触发浏览器的默认行为，如click事件会触发浏览器跳转页面。我们可以通过preventDefault()方法来取消该事件的默认行为，如下代码所示：

document.getElementById("myLink").addEventListener("click", function(event) {
  event.preventDefault();
  alert("Hello World!");
});

以上代码表示取消了id为myLink的链接的默认跳转行为，并弹出一个消息框提示“Hello World！”。

示例一：鼠标左键按下时改变按钮文本

document.getElementById("myBtn").addEventListener("mousedown", function(event) {
  if(event.button == 0) {
    this.textContent = "按钮被按下";
  }
});

以上代码表示当鼠标左键按下id为myBtn的按钮时，将按钮的文本修改为“按钮被按下”。该事件仅在鼠标左键按下时触发。

示例二：当滑动条值发生改变时即时更新显示区域

var inputRange = document.getElementById("myRange");
var displayBox = document.getElementById("displayBox");

inputRange.addEventListener("input", function(event) {
  displayBox.textContent = event.target.value;
});

以上代码表示监听了id为myRange的滑动条的input事件，当滑动条的值发生改变时，将值更新至id为displayBox的元素中。