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