這篇文章為大家帶來了關於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 < 1000000000; i++) ; console.log('end'); 登入後複製上面的程式碼中，我們在元素上綁定了onclick事件，然後在JavaScript中使用了一個for循環，這個循環會執行一億次，這時候頁面會卡住，但不妨礙你點擊按鈕。 這時候你點擊按鈕，控制台是不會有任何回應的，這是因為onclick事件是異步的，所以當你點擊按鈕的時候，onclick事件並沒有被觸發，而是等到JavaScript的執行堆疊中的任務執行完畢之後才會觸發。 onclick的同步性上面說了onclick事件是異步的，現在又說onclick事件是同步的，這樣說的話好像有點矛盾，其實這兩種說法都是正確的，直接上程式碼： onclick click document.getElementById('btn').onclick = function () { console.log('click'); } for (var i = 0; i < 10; i++) { console.log(i); if (i === 5) { document.getElementById('btn').click(); } } 登入後複製上面的程式碼中，控制台輸出到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前端】
