JavaScript與HTML之間的交互是通過(guò)事件實(shí)現(xiàn)的。事件，就是文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互瞬間，是用戶或?yàn)g覽器自身執(zhí)行的某種動(dòng)作。諸如click、load、mousemover，都是事件的名字。可以使用偵聽(tīng)器來(lái)預(yù)訂事件，以便事件發(fā)生時(shí)，執(zhí)行相應(yīng)的代碼。而響應(yīng)某個(gè)事件的函數(shù)就叫做事件處理程序。對(duì)于一個(gè)事件，DOM元素通常擁有事件方法屬性和事件處理程序?qū)傩裕鏲lick方法和onclick屬性。

　　在DOM0級(jí)規(guī)范中，通過(guò)JavaScript制定事件處理程序的傳統(tǒng)方式，就是將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩浴Ｈ纾?/p>

var btn = document.getElementById('myBtn');
btn.onclick = function(){
 console.log('click');   
}

　　DOM2級(jí)規(guī)范中，制定事件處理程序的方式，使用addEventListener函數(shù)，如：

var btn = document.getElementById('myBtn');
btn.addEventListener('click', function(){
   console.log('click'); 
}, false);

　　

　　看過(guò)以上基礎(chǔ)之后，開(kāi)始步入主題。大部分元素都支持click與dblclick，然而在實(shí)際工作中，發(fā)現(xiàn)這兩個(gè)事件之間綁定與觸發(fā)方式還是有很多不同。

　　1、通過(guò)以上兩種來(lái)綁定的click事件，都可以通過(guò)在代碼中調(diào)用element.click()方法來(lái)觸發(fā)。而對(duì)于dblclick，我發(fā)現(xiàn)元素都沒(méi)有dblclick方法。

　　

　　2、對(duì)于click想要在代碼中觸發(fā)click事件，有兩種選擇：第一，直接調(diào)用元素的click方法。第二，使用自己定義事件。對(duì)于dblclick，如果想要利用代碼觸發(fā)dblclick，只能使用自定義事件的方式。

　　

　　在某些情況下，我們可能有想利用單擊模擬雙擊的需求，這種需求分為兩種：

　　1、同正常綁定dom元素的觸發(fā)順序一致，當(dāng)用戶點(diǎn)擊一下時(shí)，觸發(fā)click事件，當(dāng)用戶在極短時(shí)間內(nèi)點(diǎn)擊兩下時(shí)，觸發(fā)順序?yàn)閏lick-click-dblclick：

　　

　　2、當(dāng)用戶單擊時(shí)，觸發(fā)click。當(dāng)用戶在極短時(shí)間內(nèi)雙擊時(shí)，只觸發(fā)dblclic：

　　

　　這種處理方式有一個(gè)缺點(diǎn)：當(dāng)用戶單擊時(shí)，會(huì)延遲一段時(shí)間，然后觸發(fā)單擊事件

總結(jié)

以上是生活随笔為你收集整理的元素的click与dblclick的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。