JavaScript的DOM事件详解

下面是JavaScript的DOM事件详解的完整攻略。

什么是DOM事件？

DOM事件是指由DOM元素触发的事件，包括如下几种类型：

• 鼠标事件：click、mousedown、mousemove、mouseup、mouseover、mouseout、mouseenter、mouseleave等。
• 键盘事件：keydown、keypress、keyup等。
• 表单事件：submit、change、reset、focus、blur等。
• 文档事件：DOMContentLoaded、load、beforeunload、unload等。
• 视窗事件：resize、scroll等。

如何使用DOM事件？

在JavaScript中，可以通过addEventListener方法为DOM元素绑定事件。

addEventListener方法用法如下：

element.addEventListener(event, function, useCapture);

• event：事件名称，如click、keydown等。
• function：事件处理函数，当元素触发事件时会执行该函数。
• useCapture：可选参数，表示事件是否在捕获阶段执行。

示例1：为按钮绑定click事件

<button id="myButton">点击我</button>

var myButton = document.getElementById('myButton');
myButton.addEventListener('click', function() {
  console.log('按钮被点击啦！');
});

示例2：监听文本框的change事件

<input type="text" id="myInput">

var myInput = document.getElementById('myInput');
myInput.addEventListener('change', function() {
  console.log('文本框的值被改变了！');
});

事件冒泡和捕获

当一个元素触发事件时，该事件会先在该元素上触发，然后再在该元素的祖先元素上依次触发，直到被处理或到达文档根节点。

这种事件传播的方式被称为事件冒泡。事件冒泡是默认的传播方式。

示例3：事件冒泡

<div id="outer">
  <div id="inner">
    点我试试！
  </div>
</div>

var outer = document.getElementById('outer');
var inner = document.getElementById('inner');

outer.addEventListener('click', function() {
  console.log('outer 被点击啦！');
});

inner.addEventListener('click', function() {
  console.log('inner 被点击啦！');
});

点击inner元素，会先触发inner元素的click事件，再触发outer元素的click事件。

如果希望在捕获阶段处理事件，可以将useCapture参数设为true。

示例4：事件捕获

<div id="outer">
  <div id="inner">
    点我试试！
  </div>
</div>

var outer = document.getElementById('outer');
var inner = document.getElementById('inner');

outer.addEventListener('click', function() {
  console.log('outer 被点击啦！');
}, true);

inner.addEventListener('click', function() {
  console.log('inner 被点击啦！');
}, true);

这次点击inner元素，会先触发outer元素的click事件，再触发inner元素的click事件。

阻止事件传播和默认行为

在事件处理函数中，可以使用event对象对事件进行控制。

• stopPropagation方法可以阻止事件传播。
• preventDefault方法可以阻止默认行为（比如点击链接跳转）。

示例5：阻止事件传播

<div id="outer">
  <div id="inner">
    点我试试！
  </div>
</div>

var outer = document.getElementById('outer');
var inner = document.getElementById('inner');

outer.addEventListener('click', function() {
  console.log('outer 被点击啦！');
});

inner.addEventListener('click', function(event) {
  console.log('inner 被点击啦！');
  event.stopPropagation();
});

这次点击inner元素，只会触发inner元素的click事件，outer元素的click事件被阻止了传播。

示例6：阻止默认行为

<a href="https://www.baidu.com" id="myLink">百度一下</a>

var myLink = document.getElementById('myLink');

myLink.addEventListener('click', function(event) {
  console.log('链接被点击啦！');
  event.preventDefault();
});

这次点击链接，不会发生页面跳转，因为preventDefault方法阻止了默认行为。

总结

以上就是JavaScript的DOM事件的详细攻略。掌握了DOM事件的使用和事件传播机制，可以让我们更好地交互开发，提高用户体验。