JavaScript常用的click事件總結分享

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

前端（vue）入門到精通課程：進入學習
API 檔案、設計、偵錯、自動化測試一體化共同作業工具：

【相關推薦：、】

onclick簡介

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

onclick事件可以繫結在任何元素上，比如<div>、<button>、<a>等等。

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

onclick的非同步性

onclick事件是非同步的，也就是說onclick事件的觸發是在JavaScript的執行棧中的任務執行完畢之後才會觸發。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>onclick</title>
</head>
<body>
<button id="btn">click</button>
<script>
    document.getElementById('btn').onclick = function () {
        console.log('click');
    }
    console.log('start');
    for (var i = 0; i < 1000000000; i++) ;
    console.log('end');
</script>
</body>
</html>
登入後複製

上面的程式碼中，我們在<button>元素上繫結了onclick事件，然後在JavaScript中使用了一個for

迴圈，這個迴圈會執行一億次，這個時候頁面會卡住，但是不妨礙你點選按鈕。

這個時候你點選按鈕，控制檯是不會有任何響應的，這是因為onclick事件是非同步的，所以當你點選按鈕的時候，onclick

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

onclick的同步性

上面說了onclick事件是非同步的，現在又說onclick事件是同步的，這樣說的話好像有點矛盾，其實這兩種說法都是正確的，直接上程式碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>onclick</title>
</head>
<body>
<button id="btn">click</button>
<script>
    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();
        }
    }
</script>
</body>
</html>
登入後複製

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

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

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

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

onclick的觸發順序

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>onclick</title>
</head>
<body>
<div id="div1">
    <div id="div2">
        <div id="div3">
            <button id="btn">click</button>
        </div>
    </div>
</div>
<script>
    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');
    }
</script>
</body>
</html>
登入後複製

上面的程式碼中，我們在<div>元素和<button>元素上分別繫結了onclick事件，然後點選<button>元素，控制檯會依次輸出btn

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

事件觸發的先後順序

在onclick事件中，如果我們繫結了多個和滑鼠按鍵相關的事件，那麼這些事件的觸發順序是怎樣的呢？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>onclick</title>
</head>
<body>
<button id="btn">click</button>
<script>
    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');
    }
</script>
</body>
</html>
登入後複製

上面的程式碼中，我們在<button>元素上繫結了onclick、ondblclick、onmousedown、onmouseup四個事件。

然後點選<button>元素，控制檯會依次輸出mousedown、mouseup、click。

如果雙擊<button>元素，控制檯會依次輸出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事件觸發時，會執行這個函數。

<button onclick="console.log('click')">click</button>
登入後複製

addEventListener()

addEventListener()方法是EventTarget的一個方法，它的第一個引數是事件的名稱，第二個引數是事件處理常式，第三個引數是一個布林值，表示是否在捕獲階段觸發事件處理常式。

<button id="btn">click</button>
<script>
  var btn = document.getElementById('btn');
  btn.addEventListener('click', function() {
    console.log('click');
  });
</script>
登入後複製

attachEvent()

attachEvent()方法是EventTarget的一個方法，它的第一個引數是事件的名稱，第二個引數是事件處理常式。

<button id="btn">click</button>
<script>
  var btn = document.getElementById('btn');
  btn.attachEvent('onclick', function() {
    console.log('click');
  });
</script>
登入後複製

結語

click事件是滑鼠點選事件，它是MouseEvent的一個範例，它的事件型別是click，它可以通過onclick屬性、addEventListener()方法和attachEvent()方法註冊。

【相關推薦：、】

以上就是JavaScript常用的click事件總結分享的詳細內容，更多請關注TW511.COM其它相關文章！