溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下JavaScript常用的click事件有哪些的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
onclick是HTML中的一個事件屬性，它的作用是當用戶點擊元素時觸發的事件。
onclick事件可以綁定在任何元素上，比如<div>、<button>、<a>等等。
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事件是同步的，這樣說的話好像有點矛盾，其實這兩種說法都是正確的，直接上代碼：
<!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事件的觸發順序是先捕獲后冒泡，也就是說先觸發捕獲事件，然后觸發冒泡事件。
<!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事件可以通過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>
以上就是“JavaScript常用的click事件有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
