English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

JavaScript基础教程

JavaScript 对象

JavaScript 函数

JS HTML DOM

JS 浏览器BOM

AJAX 基础教程

JavaScript 参考手册

Escucha de eventos de JavaScript

JavaScript事件处理程序的最新功能是事件监听。事件监听监视元素上的事件。

我们将使用addEventListener()方法来代替将事件直接分配给元素上的属性。

addEventListener()方法

addEventListener()方法将事件处理程序附加到指定的元素。

我们可以重写随机颜色示例（来自上一章），如下所示：

document.querySelector("button").addEventListener("click", bgChange);
function bgChange() {
　　　let color = "rgb("　+　random(255)　+　",　+　random(255)　+　",　+　random(255)　+　)")";
　　　document.body.style.backgroundColor = color;
}
测试看看‹/›

我们仍然使用与以前相同的bgChange()函数。我们将addEventListener()方法附加到按钮上。

addEventListener() 接受两个必填参数-要监听的事件和监听器回调函数。

此方法与事件处理程序属性（上一章）相似，但是语法明显不同。

语法：

element.addEventListener(event, listener, useCapture)

参数第一个是类型事件（例如“click”或“mousemove”）。

第二个参数是事件发生时我们要调用的监听函数。

第三个参数是一个布尔值，指定是使用事件冒泡还是使用事件捕获。此参数是可选的。

注意，不要为事件使用“ on”前缀。使用“ click”代替“ onclick”。

将事件监听添加到元素

请注意，将所有代码放入addEventListener()方法中的匿名函数中是非常合适的，如下所示：

let para = document.querySelector("#para");
para.addEventListener("click", function() {
this.innerHTML = "Hello world";
});
测试看看‹/›

还可以引用外部“命名”函数：

let para = document.querySelector("#para");
para.addEventListener("click", changeText);
function changeText() {
　　　para.innerHTML = "Hello world";
}
测试看看‹/›

Agregar múltiples escuchas de eventos al mismo elemento

A primera vista, el escucha de eventos parece muy similar a las propiedades del manejador de eventos, pero tienen algunas ventajas. Podemos establecer múltiples escuchas de eventos en el mismo elemento, como se muestra en el siguiente ejemplo:

document.querySelector("button").addEventListener("click", myFunc);
document.querySelector("button").addEventListener("click", anotherFunc);
测试看看‹/›

Podemos agregar diferentes tipos de eventos a los elementos:

document.querySelector("button").addEventListener("mouseenter", myFunc1);
document.querySelector("button").addEventListener("click", myFunc2);
document.querySelector("button").addEventListener("mouseout", myFunc3);
测试看看‹/›

pasar parámetros

Al pasar valores de parámetros, utiliza una función anónima que llama al función especificado con los parámetros:

var btn = document.querySelector("button");
btn.addEventListener("click", function() {
myFunc(x, y);
});
测试看看‹/›

agregar un escucha de eventos al objeto Window

Además, puedesaddEventListener()endocumentoyventanasobre el objeto.

En este ejemplo se utiliza el siguienteaddEventListener()El método adjunta el evento de clic al documento:

document.addEventListener("click", function() {
alert("¡Hola Mundo!!!");
});
测试看看‹/›

En este ejemplo se utilizaaddEventListener()el método adjunta el evento de cambio de tamaño (resize) a la ventana:

window.addEventListener("resize", function() {
box.innerHTML = Math.random();
});
测试看看‹/›

当前，事件监听是处理JavaScript中事件的最常见和首选方式。

removeEventListener()方法

也可以使用该removeEventListener()方法一个或所有事件从元素中删除。

var box = document.getElementById("para");
//　Attach an event handler to a P element with id="para"
box.addEventListener("mousemove", myFunc);
//　Remove the event handler from a P element with id="para"
box.removeEventListener("mousemove", myFunc);
测试看看‹/›

参数第一个是类型事件（例如“click”或“mousemove”）。

参数第二个是函数我们要调用的发生时事件。

阅读更多

参考JavaScript：参考对象事件DOM HTML

Propagación de eventos de JavaScriptEventos (Events) de JavaScript