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("鼠標移入");},},