1. Acara gelembung
Ada dua jenis model acara untuk browser: events capture dan acara gelembung. Karena IE tidak mendukung acara penangkapan, yang berikut ini terutama menggunakan acara gelembung sebagai penjelasan.
(Dubbed Bubble) Jenis gelembung mengacu pada peristiwa paling spesifik ke peristiwa paling tidak spesifik yang dipicu satu per satu.
Salinan kode adalah sebagai berikut:
<body onClick = "add ('body <br>')">
<div onClick = "add ('div <br>')">
<ponclick = "add ('p <hr>')"> klik saya </p>
</div>
</body>
<Div id = "display">
</div>
<type skrip = "Teks/JavaScript">
function add (stext) {
var ulo = document.geteLementById ("display");
ulo.innerhtml += stext;
}
</script>
Tiga fungsi di atas telah menambahkan fungsi OnClick. Tiga fungsi setelah elemen P yang berdiri sendiri dipecat. Elemen P pertama kali dieksekusi, kemudian div dieksekusi, dan akhirnya tubuh dieksekusi.
Di sini, berikut adalah pengingat acara penangkapan, dan pesanannya adalah kebalikan dari acara gelembung.
2. Pemantauan acara
Suatu acara membutuhkan fungsi untuk merespons. Jenis fungsi ini biasanya disebut event handler. Dari perspektif lain, fungsi -fungsi ini mendengarkan secara real time apakah suatu peristiwa terjadi, biasanya disebut pendengar acara. Fungsi mendengarkan acara sangat berbeda untuk browser yang berbeda.
Saya. Metode mendengarkan umum, seperti menggunakan metode OnClick, hampir setiap tag mendukung metode ini. Dan kompatibilitas browser sangat tinggi
Mempertimbangkan perilaku, pemisahan peristiwa.
Secara umum, monitor menggunakan metode berikut
Salinan kode adalah sebagai berikut:
<body>
<Div ID = "Me"> Klik </Div>
<type skrip = "Teks/JavaScript">
var opp = document.getElementById ("me"); // acara ditemukan
OPP.ONCLICK = function () {// Setel fungsi acara
Peringatan ("Saya diklik!")
}
</script>
</body>
Kedua metode yang diperkenalkan di atas sangat nyaman dan dicintai oleh pengembang Everbright saat membuat dan menangani beberapa fungsi kecil. Tetapi untuk acara yang sama. Mereka hanya dapat menambahkan satu fungsi, seperti fungsi OnClick yang ditandai oleh p. Kedua metode hanya dapat memiliki satu fungsi. Oleh karena itu, IE memiliki solusi sendiri, kolega, dan DOM standar menetapkan metode lain.
ii. Metode pemantauan di IE
Di browser pagi, setiap elemen memiliki dua metode untuk menangani mendengarkan waktu.
masing -masing adalah lampiran () dan detachenevt ().
Seperti yang dapat Anda lihat dari nama fungsinya, attacheNevT () adalah fungsi yang digunakan untuk menambahkan pemrosesan acara ke suatu elemen, sementara detachevent () digunakan untuk menghapus fungsi mendengarkan pada elemen. Sintaks mereka adalah sebagai berikut:
[objek] .attachevent ("enevt_handler", "fnhandler");
[objek] .detachevent ("enevt_handler", "fnhandler");
Di antara mereka, enevt_handler mewakili OnClick, Onload, Onmouseover, dll.
FNHandler adalah nama fungsi pendengar.
Di bagian sebelumnya, Anda dapat menggunakan metode attachEvent () alih -alih menambahkan fungsi mendengarkan. Saat Anda mengkliknya, Anda dapat menggunakan detachevent () untuk menghapus fungsi mendengarkan sehingga tidak akan dieksekusi setelah klik berikutnya.
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
fungsi fnclick () {
peringatan ("Saya diklik!");
op.detachevent ("onClick", "fnclick");
}
var op;
window.onload = function () {
op = document.getElementById ("oop"); // Temukan objeknya
op.attachevent ("onClick", "fnclick"); // Tambahkan fungsi pendengar
}
</script>
<div>
<p id = "oop">
</p>
</div>
aku aku aku. Tambahkan beberapa acara mendengarkan (yaitu)
Salinan kode adalah sebagai berikut:
<bahasa skrip = "javascript">
fungsi fnclick1 () {
Peringatan ("Saya diklik oleh fnclick1");
}
fungsi fnclick2 () {
waspada ("Saya diklik oleh fnclick2");
//op.detachevent("onClick",fnclick1); // Hapus fungsi pendengar 1
}
var op;
window.onload = function () {
op = document.getElementById ("myp"); // Temukan objeknya
op.attachevent ("onClick", fnclick1); // tambahkan fungsi pendengar 1
op.attachevent ("onClick", fnclick2); // Tambahkan fungsi pendengar 2
}
</script>
</head>
<body>
<div>
<p id = "myp"> klik saya </p>
</div>
3. Pemantauan Acara DOM Standar
Dengan dua metode IE, DOM standar juga menggunakan dua metode untuk menambah dan menghapus fungsi pendengar masing -masing. yaitu addeventListener () dan remeFeVentListener ()
Tidak seperti IE, kedua fungsi ini menerima 3 parameter, yaitu nama acara, nama fungsi yang akan ditugaskan, dan apakah itu digunakan untuk tahap gelembung atau tahap penangkapan. Parameter tahap penangkapan benar, dan parameter tahap gelembung salah. Sintaksnya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
[objek] .addeventListener ("event_name", fnhandler, bcapture);
[objek] .removeEventListener ("event_name", fnhandler, bcapture);
Metode penggunaan kedua fungsi ini pada dasarnya mirip dengan IE, tetapi Anda harus mencatat bahwa nama Event_name adalah "klik", "mouseover", dll., Daripada "Onclick" dan "Onmouseover" di IE.
Selain itu, parameter ketiga BCapture biasanya diatur ke false, pada tahap menggelegak.
Metode mendengarkan acara DOM standar:
Salinan kode adalah sebagai berikut:
<bahasa skrip = "javascript">
fungsi fnclick1 () {
peringatan ("Saya diklik 1");
op.removeeventlistener ("klik", fnclick1, false);
}
fungsi fnclick2 () {
peringatan ("Saya diklik 2");
}
window.onload = function () {
op = document.getElementById ("myp");
op.addeventListener ("klik", fnclick1, false);
op.addeventListener ("klik", fnclick2, false);
}
</script>
<div>
<p id = "myp"> klik saya </p>
</div>
Anda dapat menguji perintah eksekusi spesifik.
Di atas adalah semua tentang artikel ini, saya harap Anda menyukainya.