Window addEventListener() 方法
示例
为窗口添加点击事件处理程序:
window.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}亲自试一试 »
更简洁的语法:
window.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});亲自试一试 »
以下还有更多示例。
描述
addEventListener() 方法将事件处理程序附加到窗口。
Document 文档方法
Element 元素方法
教程
语法
window.addEventListener(event, function, Capture)
参数
| 参数 | 描述 |
| event | 必填。 事件名称。 请勿使用"on"前缀。 请使用"click"代替"onclick"。 所有 HTML DOM 事件都列在以下位置: HTML DOM 事件对象参考。 |
| function | 必需。 事件发生时要运行的函数。 事件发生时，事件对象会作为第一个参数传递给该函数。事件对象的类型取决于指定的事件。例如，"click"事件属于 MouseEvent 对象。 |
| capture | 可选(默认值 = false)。true - 处理程序在捕获阶段执行。false - 处理程序在冒泡阶段执行。 |
返回值
| NONE |
更多示例
您可以向窗口添加多个事件监听器:
window.addEventListener("click", myFunction1);
window.addEventListener("click", myFunction2);亲自试一试 »您可以添加不同类型的事件:
window.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
window.addEventListener("mouseout", someOtherFunction);亲自试一试 »传递参数时，请使用"匿名函数"来调用带有参数的函数:
window.addEventListener("click", function() {
myFunction(p1, p2);
});亲自试一试 »更改文档背景颜色:
window.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
});亲自试一试 »使用 removeEventListener() 方法:
// 添加事件监听器
window.addEventListener("mousemove", myFunction);
// 移除事件监听器
window.removeEventListener("mousemove", myFunction);亲自试一试 »浏览器支持
addEventListener在所有浏览器中均受支持:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | Yes |
