Rumah > hujung hadapan web > tutorial js > Ringkasan dan perkongsian peristiwa klik yang biasa digunakan dalam JavaScript

Ringkasan dan perkongsian peristiwa klik yang biasa digunakan dalam JavaScript

WBOY
Lepaskan: 2022-10-11 14:43:15
ke hadapan
5990 orang telah melayarinya

Artikel ini membawakan anda pengetahuan yang berkaitan tentang JavaScript, yang terutamanya memperkenalkan kandungan yang berkaitan tentang masa klik yang biasa digunakan, termasuk asynchroni onclick, synchronicity, dan urutan pencetus acara serta pendaftaran masa dan kandungan lain , mari kita lihat di bawah ini saya harap ia akan membantu semua orang.

Ringkasan dan perkongsian peristiwa klik yang biasa digunakan dalam JavaScript

[Cadangan berkaitan: Tutorial video JavaScript, bahagian hadapan web]

pengenalan onclick

onclick ialah atribut acara dalam HTML Fungsinya adalah untuk mencetuskan peristiwa apabila pengguna mengklik pada elemen.

acara onclick boleh terikat pada mana-mana elemen, seperti

, , , 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(&#39;btn&#39;).onclick = function () {
        console.log(&#39;click&#39;);
    }
    console.log(&#39;start&#39;);
    for (var i = 0; i < 1000000000; i++) ;
    console.log(&#39;end&#39;);
</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(&#39;btn&#39;).onclick = function () {
        console.log(&#39;click&#39;);
    }
    for (var i = 0; i < 10; i++) {
        console.log(i);
        if (i === 5) {
            document.getElementById(&#39;btn&#39;).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(&#39;div1&#39;).onclick = function () {
        console.log(&#39;div1&#39;);
    }
    document.getElementById(&#39;div2&#39;).onclick = function () {
        console.log(&#39;div2&#39;);
    }
    document.getElementById(&#39;div3&#39;).onclick = function () {
        console.log(&#39;div3&#39;);
    }
    document.getElementById(&#39;btn&#39;).onclick = function () {
        console.log(&#39;btn&#39;);
    }
</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

Dalam acara onclick, jika kita mengikat berbilang peristiwa yang berkaitan dengan butang tetikus, apakah urutan peristiwa ini dicetuskan?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>onclick</title>
</head>
<body>
<button id="btn">click</button>
<script>
    document.getElementById(&#39;btn&#39;).onclick = function () {
        console.log(&#39;click&#39;);
    }
    document.getElementById(&#39;btn&#39;).ondblclick = function () {
        console.log(&#39;dblclick&#39;);
    }
    document.getElementById(&#39;btn&#39;).onmousedown = function () {
        console.log(&#39;mousedown&#39;);
    }
    document.getElementById(&#39;btn&#39;).onmouseup = function () {
        console.log(&#39;mouseup&#39;);
    }
</script>
</body>
</html>
Salin selepas log masuk
Dalam kod di atas, kami mengikat empat acara onclick, ondblclick, onmousedown dan onmouseup ke elemen

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!

Label berkaitan:
sumber:juejin.im
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan