JavaScript常用的click事件總結分享

這篇文章為大家帶來了關於 JavaScript 的相關知識，其中主要介紹了關於常用的click時間的相關內容，包括了onclick異步性、同步性、事件觸發的先後順序以及時間註冊等內容，下面一起來看看，希望對大家有幫助。

【相關推薦： JavaScript影片教學 、 web前端 】

##onclick簡介 onclick是HTML中的一個事件屬性，它的作用是當使用者點擊元素時觸發的事件。

onclick事件可以綁定在任何元素上，例如 、 、 等等。

onclick事件的觸發順序是先捕捉後冒泡，也就是說先觸發捕獲事件，然後觸發冒泡事件。

onclick的非同步性 onclick事件是異步的，也就是說onclick事件的觸發是在JavaScript的執行堆疊中的任務執行完畢之後才會觸發。 onclick click document.getElementById('btn').onclick = function () { console.log('click'); } console.log('start'); for (var i = 0; i

上面的程式碼中，我們在 元素上綁定了onclick事件，然後在JavaScript中使用了一個for

循環，這個循環會執行一億次，這時候頁面會卡住，但不妨礙你點擊按鈕。

這時候你點擊按鈕，控制台是不會有任何回應的，這是因為onclick事件是異步的，所以當你點擊按鈕的時候，onclick

事件並沒有被觸發，而是等到JavaScript的執行堆疊中的任務執行完畢之後才會觸發。

onclick的同步性 上面說了onclick事件是異步的，現在又說onclick事件是同步的，這樣說的話好像有點矛盾，其實這兩種說法都是正確的，直接上程式碼： onclick click document.getElementById('btn').onclick = function () { console.log('click'); } for (var i = 0; i

上面的程式碼中，控制台輸出到5的時候，我們手動觸發了onclick事件，這個時候控制台會輸出click

#，然後繼續輸出後面的，這就說明了onclick同步性。

查閱了相關資料，如果onclick事件是由使用者手動觸發的，那麼onclick事件是異步的，會壓入事件佇列中，如果onclick

事件是由JavaScript程式碼觸發的，那麼onclick事件是同步的，就會立即執行。

onclick的觸發順序 onclick事件的觸發順序是先捕捉後冒泡，也就是說先觸發擷取事件，然後觸發冒泡事件。 onclick click document.getElementById('div1').onclick = function () { console.log('div1'); } document.getElementById('div2').onclick = function () { console.log('div2'); } document.getElementById('div3').onclick = function () { console.log('div3'); } document.getElementById('btn').onclick = function () { console.log('btn'); }

上面的程式碼中，我們在 元素和 元素上分別綁定了onclick事件，然後點擊 元素，控制台會依序輸出btn

#、div3、div2、div1，這就是onclick事件的觸發順序。

事件觸發的先後順序 在onclick事件中，如果我們綁定了多個和滑鼠按鍵相關的事件，那麼這些事件的觸發順序是怎樣的呢？ onclick click document.getElementById('btn').onclick = function () { console.log('click'); } document.getElementById('btn').ondblclick = function () { console.log('dblclick'); } document.getElementById('btn').onmousedown = function () { console.log('mousedown'); } document.getElementById('btn').onmouseup = function () { console.log('mouseup'); }

上面的程式碼中，我們在 元素上綁定了onclick、ondblclick、onmousedown、onmouseup四個事件。

然後點選 元素，控制台會依序輸出mousedown、mouseup、click。

如果您雙擊 元素，控制台會依序輸出mousedown、mouseup、click、mousedown、mouseup、click、dblclick。

所以事件觸發的順序是onmousedown、onmouseup、onclick、ondblclick。

所以呢在使用onclick事件的時候，如果綁定了多個和滑鼠按鍵相關的事件，那麼就需要注意事件處理的邏輯，避免出現一些意想不到的問題。

事件對象 在onclick事件中，我們可以透過event參數來取得事件對象，事件對象包含了事件的相關資訊。

事件物件event是MouseEvent的實例，它繼承了UIEvent和Event，所以事件物件中包含了UIEvent和Event的所有屬性和方法。

MouseEvent的屬性：

MouseEvent的方法：

getModifierState(): 傳回一個布林值，表示是否按下了指定的鍵。

initMouseEvent(): 初始化事件物件。

preventDefault(): 封鎖事件的預設行為。

stopImmediatePropagation(): 阻止事件向上冒泡，並阻止事件的進一步捕獲或冒泡。

stopPropagation(): 阻止事件往上冒泡。

click事件註冊的方式 click事件可以透過onclick屬性、addEventListener()方法和attachEvent()方法註冊。

onclick屬性

onclick屬性是Element的屬性，它的值是函數，當click事件觸發時，會執行這個函數。 click

addEventListener()

addEventListener()方法是EventTarget的一个方法，它的第一个参数是事件的名称，第二个参数是事件处理函数，第三个参数是一个布尔值，表示是否在捕获阶段触发事件处理函数。

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

attachEvent()方法是EventTarget的一个方法，它的第一个参数是事件的名称，第二个参数是事件处理函数。

click var btn = document.getElementById('btn'); btn.attachEvent('onclick', function() { console.log('click'); }); 结语 click事件是鼠标点击事件，它是MouseEvent的一个实例，它的事件类型是click，它可以通过onclick属性、addEventListener()方法和attachEvent()方法注册。

【相关推荐： JavaScript视频教程 、 web前端 】

JavaScript常用的click事件總結分享

结语

相關文章