addeventlistener用法
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
addeventlistener用法
addEventListener是JavaScript中常用的一个方法，用于给HTML 元素添加事件监听器。
通过该方法，我们可以在指定的HTML元素上注册多个事件监听器，并在需要的时候触发对应的事件处理函数。
addEventListener的用法非常灵活，通过事件类型、事件处理函数和其他可选参数，可以满足不同的需求。
下面将详细介绍addEventListener的用法，并提供一些示例。
基本语法：
element.addEventListener(event, function, useCapture);
参数说明：
- event：指定需要监听的事件类型，比如click、keydown等。
也可以是自定义事件。
- function：要执行的函数，也就是事件处理函数。
- useCapture：可选参数，布尔值，指定事件是在捕获阶段（true）还是冒泡阶段（false）触发。
示例1：基本用法
```
<!DOCTYPE html>
<html>
<body>
<button id="myBtn">点击一下</button>
<script>
document.getElementById("myBtn").addEventListener("click", function
alert("Hello World!");
});
</script>
</body>
</html>
```
上面的代码中，我们给id为“myBtn”的按钮元素添加了一个click 事件监听器。
当用户点击按钮时，会弹出一个提示框，显示"Hello World!"。
示例2：使用箭头函数作为事件处理函数
```
<!DOCTYPE html>
<html>
<body>
<button id="myBtn">点击一下</button>
<script>
document.getElementById("myBtn").addEventListener("click", ( =>
alert("Hello World!");
});
</script>
</body>
</html>
```
上面的代码和示例1类似，只是使用了箭头函数作为事件处理函数。
示例3：使用其他事件类型
```
<!DOCTYPE html>
<html>
<body>
<input type="text" id="myInput">
<script>
document.getElementById("myInput").addEventListener("keydown ", function
console.log("Keydown event triggered!");
});
</script>
</body>
</html>
```
上面的代码中，我们给id为“myInput”的输入框元素添加了一个keydown事件监听器。
当用户在输入框按下键盘的任意键时，会在浏览器的控制台中输出"Keydown event triggered!"。
示例4：在捕获阶段触发事件
```
<!DOCTYPE html>
<html>
<body>
<div id="myDiv">点击我</div>
<script>
document.getElementById("myDiv").addEventListener("click", function
console.log("Bubble phase");
}, false);
function
console.log("Capture phase");
}, true);
</script>
</body>
</html>
```
上面的代码中，我们给id为“myDiv”的div元素添加了两个click
事件监听器。
第一个监听器设置useCapture为false，在冒泡阶段触发，输出"Bubble phase"。
第二个监听器设置useCapture为true，在捕获阶
段触发，输出"Capture phase"。
示例5：使用event对象
```
<!DOCTYPE html>
<html>
<body>
<button id="myBtn">点击一下</button>
<script>
function(event)
event.preventDefault(; // 阻止默认行为
alert("Hello World!");
});
</script>
</body>
</html>
```
上面的代码中，我们给id为“myBtn”的按钮元素添加了一个click 事件监听器，并在事件处理函数中使用event对象。
我们调用了preventDefault方法来阻止按钮的默认行为（在这个例子中是阻止按钮触发默认的表单提交行为）。
从上述示例可以看出，addEventListener方法可以非常灵活地满足不同的需求，并且可以在任意的HTML元素上使用。
掌握addEventListener的用法，能够为网页添加更多的交互性和响应能力。