螺竹编程
发布于 2024-05-27 / 2 阅读
0

JavaScript/DOM:事件处理

在 DOM(文档对象模型)中,事件是指在网页中发生的交互动作,如点击、滚动、键盘输入等。当这些事件发生时,网页可以通过 JavaScript 来捕捉并处理它们,以便对用户的交互做出相应的反应。

DOM 事件的基本流程如下:

  1. 选定一个 HTML 元素。

  2. 注册一个事件监听器(也称为事件处理函数)来监听该元素上的特定事件。

  3. 当事件发生时,浏览器会调用该事件监听器,执行与其相关联的 JavaScript 代码。

在 JavaScript 中,可以使用 addEventListener() 方法来注册事件监听器。该方法的第一个参数是要监听的事件类型,比如 "click"、"scroll"、"keydown" 等等。第二个参数是事件发生时要执行的回调函数。回调函数中的代码会在浏览器调用该事件监听器时执行。

例如,以下代码将在页面上的按钮被点击时弹出一个提示框:

const button = document.querySelector('button');

button.addEventListener('click', function() {
  alert('Button clicked!');
});

除了 addEventListener() 方法之外,还有一些其他的事件处理函数,比如 onmousedown、onkeydown 等等。这些方法与 addEventListener() 方法有一些区别,但基本的原理是相同的。