HTML DOM addEventListener() 方法

2024-05-15 23:03| 来源: 网络整理| 查看: 265

w3school 在线教程 HTML 系列教程浏览器脚本服务器脚本编程教程 XML 系列教程建站手册参考手册 JS 参考手册 JS 参考手册（类别排序） JS 参考手册（字母排序） JavaScript JS Array JS Boolean JS Class JS Date JS Error JS Global JS JSON JS Math JS Number JS RegExp JS String JS 对象 JS 运算符 JS 语句 JS 类型化数组 Window Window 对象 Window Console Window History Window Location Window Navigator Window Screen HTML DOM HTML Document HTML Element HTML Attribute HTML Event HTML Event 对象 HTML Collection HTML NodeList HTML DOMTokenList HTML Style Web API API Canvas API Console API Fetch API Fullscreen API Geolocation API History API MediaQueryList API Storage API Validation API Web HTML 对象 - button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit text time url week
其他参考手册 CSSStyleDeclaration JS 类型转换 HTML DOM addEventListener() 方法 accessKey appendChild() HTML DOM Elements 对象定义和用法
addEventListener() 方法将事件处理程序附加到元素。
实例例子 1
向元素添加 click 事件：
element.addEventListener("click", myFunction); function myFunction() { document.getElementById("demo").innerHTML = "Hello World"; }
亲自试一试
例子 2
更紧凑的代码：
element.addEventListener("click", function() { document.getElementById("demo").innerHTML = "Hello World"; });
亲自试一试

您可以在页面下方找到更多实例。
语法 element.addEventListener(type, function, useCapture) 参数参数描述 type
必需。事件的名称。

请不要使用 "on" 前缀。

请使用 "click" 而不是 "onclick"。

DOM 事件的完整列表
function 必需。事件发生时运行的函数。 useCapture
可选（default = false）。
false - 处理程序在冒泡阶段执行。 true - 处理程序在捕获阶段执行。返回值
无。
技术细节
该方法将把指定的事件监听器函数添加到当前节点的监听器集合中，以处理指定类型 type 的事件。如果 useCapture 为 true，则监听器被注册为捕捉事件监听器。如果 useCapture 为 false，它被注册为普通事件监听器。

addEventListener() 可能被调用多次，在同一个节点上为同一种类型的事件注册多个事件句柄。但要注意，DOM 不能确定多个事件句柄被调用的顺序。

如果一个事件监听器函数在同一个节点上用相同的 type 和 useCapture 参数注册了两次，那么第二次注册将被忽略。如果正在处理一个节点上的事件时，在这个节点上注册了一个新的事件监听器，则不会为那个事件调用新的事件监听器。

当用 Node.cloneNode() 方法或 Document.importNode() 方法复制一个 Document 节点时，不会复制为原始节点注册的事件监听器。

这个方法也在 Document 和 Window 对象上定义了，而且工作方式类似。
更多实例例子 3
您可以将许多事件添加到同一元素：
element.addEventListener("click", myFunction1); element.addEventListener("click", myFunction2);
亲自试一试
例子 4
您可以将不同的事件添加到同一元素：
element.addEventListener("mouseover", myFunction); element.addEventListener("click", someOtherFunction); element.addEventListener("mouseout", someOtherFunction);
亲自试一试
例子 5
如需传递参数值，请使用“匿名函数”：
element.addEventListener("click", function() { myFunction(p1, p2); });
亲自试一试
例子 6
更改元素的背景颜色：
element.addEventListener("click", function() { this.style.backgroundColor = "red"; });
亲自试一试
例子 7
冒泡和捕获的区别：
element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);
亲自试一试
例子 8
删除事件处理程序：
element.addEventListener("mousemove", myFunction); element.removeEventListener("mousemove", myFunction);
亲自试一试
浏览器支持
element.addEventListener() 是 DOM Level 2 (2001) 功能。

所有浏览器都完全支持它：
Chrome IE Edge Firefox Safari Opera Chrome IE Edge Firefox Safari Opera 支持 9-11 支持支持支持支持相关页面元素方法：
addEventListener() 方法

removeEventListener() 方法
文档方法：
addEventListener() 方法

removeEventListener() 方法
教程：
HTML DOM EventListener

DOM 事件的完整列表
accessKey appendChild() HTML DOM Elements 对象 JavaScript 和 HTML DOM 参考手册 JavaScript 实例 JavaScript 测验 JavaScript 教程
W3School 简体中文版提供的内容仅用于培训和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。版权所有，保留一切权利。

关于 W3School 帮助 W3School 使用条款隐私条款技术支持：赢科蒙ICP备06004630号

【本文地址】

公司简介

联系我们