一个Dom绑定多个事件
生活随笔
收集整理的這篇文章主要介紹了
一个Dom绑定多个事件
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
在原生操作dom元素的時候，常常需要用到一個dom綁定多個事件，比如一個元素既要點擊又要數(shù)遍移入；要同時監(jiān)聽到兩個事件原生需要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的參數(shù)值得說一下，
第一個參數(shù)是事件名稱，沒有on，
第二個是回調(diào)函數(shù)，其實是瀏覽器調(diào)用的，
第三個是 是否捕獲階段觸發(fā)，一般設(shè)置為false，
還有就是這個方法是先綁定的先執(zhí)行
另外，經(jīng)過測試，發(fā)現(xiàn)這個addEventListener在IE8及一下版本不支持，可以使用attachEvent方法開替代，當然，是兼容處理
這個用法如下：
元素.attachEvent( 'onclick', function(){...} );如果是JQuery庫的話 使用on即可：
$("#btn").on("click", function () {$("#box").text("這是第二個元素");});總結(jié)
以上是生活随笔為你收集整理的一个Dom绑定多个事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Windows事件ID及解释大全
- 下一篇： 划水神器--在浏览器地址栏和标签页tit