addEventListener() 方法

最新推荐文章于 2024-07-01 16:22:16 发布

qq_39355295

最新推荐文章于 2024-07-01 16:22:16 发布

阅读量315

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/qq_39355295/article/details/102503642

版权

Javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1、定义

addEventListener() 方法用于向指定元素添加事件句柄。
提示：使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

2、语法

element.addEventListener(event, function, useCapture)

3、参数值

(1) event 必须。字符串，指定事件名。
注意: 不要使用 “on” 前缀。例如，使用 “click” ,而不是使用 “onclick”。
提示：所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event对象参考手册。
(2) function 必须。指定要事件触发时执行的函数。
当事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。
(3) useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
可能值:
true - 事件句柄在捕获阶段执行
false- false- 默认。事件句柄在冒泡阶段执行

4、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>用户点击后使用 addEventListener() 方法来执行函数。</p>
<button id="myBtn">点我</button>
<p id="demo">
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() 
{
    document.getElementById("demo").innerHTML = "Hello World";
}
</script>

</body>
</html>