一个Dom绑定多个事件
生活随笔
收集整理的這篇文章主要介紹了
一个Dom绑定多个事件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在原生操作dom元素的時候，常常需要用到一個dom綁定多個事件，比如一個元素既要點擊又要數遍移入；要同時監聽到兩個事件原生需要addEventlistener
直接上代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><title>綁定多個事件</title></head><body><button id="btn">點擊顯示</button>顯示：<div id="box"></div></body><script>window.onload = function () {var box = document.getElementById("box");document.getElementById("btn").addEventListener("click", function () {box.innerText = "這是第一個元素";});document.getElementById("btn").addEventListener("dblclick", function () {box.innerText = "這是第二個元素";});};</script> </html>addEventListener的參數值得說一下，
第一個參數是事件名稱，沒有on，
第二個是回調函數，其實是瀏覽器調用的，
第三個是 是否捕獲階段觸發，一般設置為false，
還有就是這個方法是先綁定的先執行
另外，經過測試，發現這個addEventListener在IE8及一下版本不支持，可以使用attachEvent方法開替代，當然，是兼容處理
這個用法如下：
元素.attachEvent( 'onclick', function(){...} );如果是JQuery庫的話 使用on即可：
$("#btn").on("click", function () {$("#box").text("這是第二個元素");});總結
以上是生活随笔為你收集整理的一个Dom绑定多个事件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Windows事件ID及解释大全
- 下一篇： 计算机中常用的时间换算