window.addEventListener 该如何使用呢,找个例子吧
时间: 2023-05-18 09:07:06 浏览: 65
window.addEventListener() 是 JavaScript 中用于添加事件监听器的方法,它可以在指定的元素上添加一个或多个事件监听器,以便在事件发生时执行相应的操作。以下是一个例子:
```
// 获取按钮元素
var btn = document.getElementById("myButton");
// 添加点击事件监听器
btn.addEventListener("click", function() {
alert("按钮被点击了!");
});
```
在上面的例子中,我们首先通过 `document.getElementById()` 方法获取了一个按钮元素,然后使用 `addEventListener()` 方法为该按钮添加了一个点击事件监听器。当用户点击该按钮时,就会弹出一个提示框,显示“按钮被点击了!”。
相关问题
window.addEventListener使用
`window.addEventListener`通常被用来监听浏览器窗口事件,比如窗口大小的改变、文档的加载、滚动等。它的语法如下:
```
window.addEventListener(event, function, useCapture);
```
其中,`event`是要监听的事件名称,比如`resize`、`load`或`scroll`等。`function`则是事件触发时要执行的JavaScript代码。`useCapture`是一个可选参数,它指定事件是否在捕获阶段处理。
下面是一个简单的例子,演示如何监听窗口大小改变事件:
```javascript
window.addEventListener('resize', function() {
console.log('窗口大小已改变');
});
```
当浏览器窗口大小发生改变时,上述代码会在控制台输出一条信息。
值得注意的是,`window.addEventListener`可以被用来监听任何DOM元素的事件,不仅仅是`window`对象。例如,我们可以监听一个按钮的点击事件,代码如下:
```javascript
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
console.log('按钮被点击了');
});
```
上述代码会在按钮被点击时,在控制台输出一条信息。
window.addeventlistener事件
window.addEventListener() 是一个用于在浏览器中注册事件监听器的方法。它可以将一个特定的函数绑定到一个指定的事件上,当该事件被触发时,绑定的函数就会被执行。
例如,下面的代码将在文档加载完成后弹出一个提示框:
```
window.addEventListener('load', function() {
alert('页面加载完成!');
});
```
在这个例子中,我们使用了 `load` 事件来检测文档是否已经加载完成。当文档加载完成后,绑定的函数就会被执行,弹出一个提示框。
除了 `load` 事件外,还有很多其他的事件可以被监听,比如 `click`、`mouseover`、`keydown` 等等。你可以在 MDN 文档中查看完整的事件列表。