JavaScript addEventListener事件列表

addEventListener 方法用于向指定元素添加事件监听器，当该对象触发指定的事件时，指定的回调函数就会被执行。以下是一些常见的事件类型

鼠标事件

click: 当用户点击某个对象时触发。

dblclick: 当用户双击某个对象时触发。

contextmenu：当用户右键某个对象时触发。

mousedown: 鼠标按钮：被按下时触发。

mouseup: 鼠标按钮被松开时触发。

mousemove: 鼠标移动时触发。

mouseover: 鼠标移到某元素上时触发。

mouseout: 鼠标从某元素移开时触发。

键盘事件

keydown: 某个键盘按键被按下时触发。

keypress: 某个键盘按键被按下并松开时触发。

keyup: 某个键盘按键被松开时触发。

框架/对象事件

load: 页面或图像加载完成时触发。

unload: 用户退出页面时触发。

resize: 窗口或框架被重新调整大小时触发。

scroll: 文档被滚动时触发。

表单事件

blur: 元素失去焦点时触发。

focus: 元素获得焦点时触发。

change: 表单元素的内容改变时触发。

submit: 表单提交时触发。

剪贴板事件

copy: 用户拷贝元素内容时触发。

cut: 用户剪切元素内容时触发。

paste: 用户粘贴元素内容时触发。

多媒体事件

play: 视频/音频开始播放时触发。

pause: 视频/音频暂停时触发。

ended: 视频/音频播放结束时触发。

动画事件

animationstart: CSS 动画开始播放时触发。

animationend: CSS 动画结束播放时触发。

animationiteration: CSS 动画重复播放时触发。

过渡事件

transitionend: CSS 完成过渡后触发。

其他事件

message: 从对象接收到消息时触发（如 WebSocket, Web Worker）。

online: 浏览器开始在线工作时触发。

offline: 浏览器开始离线工作时触发。

这些事件类型可以通过 addEventListener 方法来监听和处理，从而实现丰富的交互效果传送门。

document.getElementById("myBtn").addEventListener("contextmenu", function(event) {
	event.preventDefault()//阻止默认事件
	document.getElementById("demo").innerHTML = "Hello World";
});

addEventListener() 和 removeEventListener()

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

  mounted() {
    document.getElementById("btn").addEventListener("mouseenter", this.add);
  },
  beforeDestroy() {
    document.getElementById("btn").removeEventListener("mouseenter", this.add);
  },
  methods: {
    add() {
      console.log("鼠标移入");
    },
  },