, dsb. Tertib pencetus peristiwa onclick ialah menangkap dahulu dan kemudian menggelegak, iaitu, peristiwa menangkap dicetuskan dahulu, dan kemudian peristiwa menggelegak dicetuskan.
Sifat asynchronous onclick
Acara onclick adalah tak segerak, yang bermaksud bahawa peristiwa onclick dicetuskan hanya selepas tugasan dalam timbunan pelaksanaan JavaScript dilaksanakan.
<!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> Salin selepas log masuk
Dalam kod di atas, kami mengikat acara onclick pada elemen dan kemudian menggunakan gelung untuk
dalam JavaScript ini akan dilaksanakan sebanyak 100 juta kali. Pada masa ini, halaman akan tersekat, tetapi ia tidak akan menghalang anda daripada mengklik butang.
Apabila anda mengklik butang pada masa ini, tiada respons daripada konsol Ini kerana acara onclick adalah tidak segerak, jadi apabila anda mengklik butang, acara onclick
adalah. tidak diproses, tetapi tidak akan mencetuskan sehingga tugasan dalam timbunan pelaksanaan JavaScript dilaksanakan.
Kesegerakan onclick Adalah dikatakan di atas bahawa acara onclick adalah tidak segerak, dan kini dikatakan bahawa acara onclick adalah segerak Ini kelihatan agak bertentangan, tetapi sebenarnya, kedua-dua pernyataan betul. , pergi terus ke kod:
<!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> Salin selepas log masuk
Dalam kod di atas, apabila output konsol mencapai 5, kami mencetuskan acara onclick secara manual Pada masa ini, konsol akan mengeluarkan klik
, dan kemudian teruskan Output berikut menunjukkan penyegerakan onclick.
Selepas merujuk maklumat yang berkaitan, jika acara onclick dicetuskan secara manual oleh pengguna, maka acara onclick adalah tidak segerak dan akan ditolak ke dalam baris gilir acara jika acara onclick
dicetuskan oleh kod JavaScript , maka acara onclick adalah segerak dan akan dilaksanakan serta-merta.
Jujukan pencetus onclick Jujukan pencetus acara onclick ialah menangkap dahulu dan kemudian gelembung, iaitu, peristiwa tangkapan dicetuskan dahulu, dan kemudian peristiwa menggelegak dicetuskan .
<!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> Salin selepas log masuk
Dalam kod di atas, kami mengikat acara onclick pada elemen
dan elemen
dan kemudian klik elemen seterusnya 🎜>, div3, div2, div1, ini ialah urutan pencetus acara onclick.
Tertib peristiwa dicetuskan
<!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> Salin selepas log masuk
Kemudian klik elemen dan konsol akan mengeluarkan tetikus turun, naik tetikus dan klik mengikut turutan.
Jika anda klik dua kali pada elemen konsol akan mengeluarkan tetikus turun, tetikus, klik, tetikus, tetikus, klik, dblclick dalam urutan.
Jadi susunan pencetus acara ialah onmousedown, onmouseup, onclick, ondblclick.
Jadi apabila menggunakan acara onclick, jika berbilang acara yang berkaitan dengan butang tetikus terikat, anda perlu memberi perhatian kepada logik pemprosesan acara untuk mengelakkan beberapa masalah yang tidak dijangka.
Objek acara
Acara objek acara ialah tika MouseEvent Ia mewarisi UIEvent dan Acara, jadi objek acara mengandungi semua sifat dan kaedah UIEvent dan Acara.
Sifat MouseEvent:
Kaedah MouseEvent:
getModifierState(): Mengembalikan nilai Boolean, Menunjukkan sama ada kekunci yang ditentukan telah ditekan.
initMouseEvent(): Mulakan objek acara.
preventDefault(): Tingkah laku lalai untuk menghalang peristiwa.
stopImmediatePropagation(): Menghentikan acara daripada menggelegak ke atas dan menghalang tangkapan atau menggelegak acara selanjutnya.
stopPropagation(): Menghentikan acara daripada menggelegak.
atribut onclick
atribut onclick ialah atribut Elemen Nilainya ialah fungsi apabila peristiwa klik dicetuskan dilaksanakan.
<button onclick="console.log('click')">click</button> Salin selepas log masuk
addEventListener()
addEventListener()方法是EventTarget的一个方法，它的第一个参数是事件的名称，第二个参数是事件处理函数，第三个参数是一个布尔值，表示是否在捕获阶段触发事件处理函数。
<button id="btn">click</button>
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
console.log('click');
});
</script> Salin selepas log masuk
attachEvent()
attachEvent()方法是EventTarget的一个方法，它的第一个参数是事件的名称，第二个参数是事件处理函数。
<button id="btn">click</button>
<script>
var btn = document.getElementById('btn');
btn.attachEvent('onclick', function() {
console.log('click');
});
</script> Salin selepas log masuk
结语
click事件是鼠标点击事件，它是MouseEvent的一个实例，它的事件类型是click，它可以通过onclick属性、addEventListener()方法和attachEvent()方法注册。
【相关推荐：JavaScript视频教程 、web前端 】
Atas ialah kandungan terperinci Ringkasan dan perkongsian peristiwa klik yang biasa digunakan dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![Analisis mendalam JavaScript [Web front-end mesti tahu kemahiran asas]](https://img.php.cn/upload/course/000/000/041/61d3ff1c83b43350.jpg)
![Sintaks asas JavaScript [dom|bom|es6 sintaks baharu|jQuery|ecarta visualisasi data]](https://img.php.cn/upload/course/000/000/068/6242bb730fb11708.png)
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
