addeventlistener的一些常用监听事件
时间: 2024-05-20 19:17:43 浏览: 16
1. click:鼠标单击事件;
2. mouseover:鼠标移动到元素上方触发事件;
3. mouseout:鼠标移开元素触发事件;
4. keydown:按下键盘上的任意键触发事件;
5. keyup:释放键盘上的任意键触发事件;
6. submit:提交表单触发事件;
7. change:表单元素的值发生变化触发事件;
8. load:文档或图片加载完成触发事件;
9. error:文档或图片加载失败触发事件;
10. resize:窗口大小改变触发事件。
相关问题
addeventlistener 常用事件
"vue addeventlistener事件"是什么意思?
这可能是指在Vue.js中使用addEventListener()方法来添加事件监听器。例如,你可以在Vue组件中编写以下代码来监听一个点击事件:
```
<template>
<div @click="handleClick">Click me</div>
</template>
<script>
export default {
methods: {
handleClick() {
// 处理点击事件的代码
}
},
mounted() {
this.$el.addEventListener('click', this.handleClick)
},
beforeDestroy() {
this.$el.removeEventListener('click', this.handleClick)
}
}
</script>
```
在这个例子中,mounted()生命周期钩子中的代码使用addEventListener()方法来将handleClick()方法作为点击事件的处理程序添加到组件的DOM元素上。在beforeDestroy()生命周期钩子中,我们再次使用removeEventListener()方法来删除该事件处理程序,以确保不会发生内存泄漏。
addeventlistener事件委托怎么用
事件委托是一种常用的事件处理技巧,它可以使我们在处理大量元素时减少代码量。addEventListener是JavaScript中的一个方法,它可以用来添加事件监听器,以在元素上触发指定的事件,因而可以结合事件委托来使用。
使用addEventListener时,我们可以将事件监听器绑定到一个父元素上,而不是在每个子元素上添加监听器。当子元素触发事件时,该父元素会触发该事件。请看下面的示例代码:
```
// 获取父元素
const parent = document.getElementById('parent');
// 添加事件监听器
parent.addEventListener('click', function(event) {
// event.target就是触发事件的元素
if (event.target && event.target.nodeName === 'LI') {
// 处理事件
}
});
```
在这个例子中,我们首先获取了一个具有大量子元素的父元素,然后在父元素上添加了一个click事件监听器。当子元素被单击时,该监听器会触发。我们可以通过event.target获取一些关键的信息,如被单击的元素的nodeName。这样我们就可以筛选出我们需要的元素,并进行接下来的处理。
总之,addEventListener配合事件委托使用,可以减少代码数量并更加高效地处理大量元素和事件。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)