Peristiwa di browser semuanya ada dalam bentuk objek. Demikian pula, ada juga perbedaan dalam memperoleh objek acara antara browser IE dan browser DOM standar. Di browser IE, objek acara adalah acara atribut objek Windows. Metode berikut biasanya digunakan untuk mengaksesnya.
Salinan kode adalah sebagai berikut:
op.onClick = function () {
var oevent = window.event;
}
Meskipun ini adalah properti objek jendela, objek acara hanya dapat diakses saat peristiwa terjadi. Setelah semua fungsi penanganan acara dieksekusi, objek menghilang.
DOM standar menetapkan bahwa objek peristiwa harus diteruskan ke fungsi pemrosesan acara sebagai parameter unik. Mengakses objek acara di browser Firefox sekali biasanya digunakan sebagai parameter, dan kodenya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
op.onClick = function (oevent) {
}
Oleh karena itu, agar dapat kompatibel dengan kedua browser, metode berikut biasanya digunakan
Salinan kode adalah sebagai berikut:
op.onClick = function (oevent) {
if (window.event) oevent = window.event;
}
Setelah mendapatkan objek acara, browser dapat menangani berbagai peristiwa melalui serangkaian properti dan metode, seperti acara mouse, acara keyboard, dan acara browser. Tunggu
Berikut ini mencantumkan sifat dan metode umum:
Dari atas, kita dapat melihat bahwa kedua jenis browser masih memiliki beberapa kesamaan. Misalnya, atribut Type kompatibel dengan berbagai browser. Ini menunjukkan jenis peristiwa untuk mengambil dan mengembalikan nilai seperti "klik" dan "mousemove".
Ini sangat berguna untuk menangani berbagai jenis acara dalam fungsi yang sama.
Sebagai berikut: Fungsi yang sama menangani banyak acara.
Salinan kode adalah sebagai berikut:
<bahasa skrip = "javascript">
fungsi pegangan (oevent) {
var disp = document.geteLementById ("display");
if (window.event) oevent = window.event; // Tangani kompatibilitas dan dapatkan objek
if (oevent.type == "klik")
disp.innerhtml += "Anda mengklik saya!";
lain jika (oevent.type == "mouseover")
disp.innerhtml += "Anda pindah ke saya";
}
window.onload = function () {
var op = document.getElementById ("box");
op.onClick = handle;
op.onmouseover = pegangan;
}
</script>
<div>
<Div id = "box"> </div>
<p id = "display"> klik saya </p>
</div>
Kode di atas menambahkan dua fungsi respons acara ke div ID = "box", dan kedua acara ini adalah fungsi yang sama.
Dalam fungsi ini, pertama -tama pertimbangkan untuk mendapatkan objek acara yang kompatibel, dan kemudian menggunakan Disk Atribut Type dengan nama acara.
Saat mendeteksi tiga tombol shift, alt, dan ctrl, metode yang digunakan oleh dua jenis browser persis sama, keduanya memiliki tiga atribut shiftkey, altkey, dan ctrlkey.
Kodenya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
var bshift = oevent.shiftkey;
var balt = oevent.altkey;
var bctrl = oevent.ctrlkey;
Selain itu, ketika mendapatkan pointer mouse, metode yang digunakan oleh kedua jenis browser adalah sama, keduanya termasuk ClientX, Clienty, ScreenX, dan Screeney.
Di antara mereka, ClientX dan Clienty mewakili lokasi mouse di area klien, dan tidak termasuk bilah status browser, bilah menu, dll.
Kodenya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
var iclientx = oevent.clientx;
var iclienty = oevent.clienty;
screenx dan screeney merujuk ke posisi mouse di seluruh layar komputer, dan kodenya
Salinan kode adalah sebagai berikut:
var iscreenx = oevent.screenx;
var iscreeny = oevent.screeny;
Sering kali, pengembang ingin tahu bahwa acara tersebut dipicu oleh objek itu, yaitu target acara.
Dengan asumsi bahwa elemen <p> mengalokasikan fungsi penangan event evlick, <p> akan dianggap sebagai target ketika acara klik dipicu.
Di browser IE, target terkandung dalam properti srcelement dari objek acara, kode adalah sebagai berikut
Salinan kode adalah sebagai berikut: var otarget = oevent.srcelement;
Di browser DOM standar, target termasuk dalam atribut target, kode adalah sebagai berikut
Salinan kode adalah sebagai berikut: var otarget = oevent.target;
Dapatkan target acara
Salinan kode adalah sebagai berikut:
<bahasa skrip = "javascript">
fungsi pegangan (oevent) {
var disp = document.geteLementById ("display");
if (window.event) oevent = window.event; // Tangani kompatibilitas dan dapatkan objek
var otarget;
if (oevent.srcelement) // menangani kompatibilitas dan mendapatkan acara
Otarget = oevent.srcelement;
kalau tidak
otarget = oevent.target;
disp.innerHtml + = "nama elemen:" + otarget.tagname + "<br>" + "konten elemen:" + otarget.textContent + "<br>"
+ "Node segera berikut:" + otarget.textContent + "<br>"
;
}
window.onload = function () {
var op = document.getElementById ("box");
op.onClick = handle;
}
</script>
<div>
<Div id = "box">
Konten kotak
</div>
<p id = "display"> </p>
</div>
(Tambahan) Properti Objek Elemen http://www.w3school.com.cn/xmldom/dom_element.asp
(Tambahan) Metode objek elemen http://www.w3school.com.cn/xmldom/dom_element.asp
Karena target acara berbeda dalam dua jenis browser, kode harus memastikan kompatibilitas. Praktik yang biasa adalah secara langsung menggunakan objek sebagai kondisi pernyataan IF. Kodenya adalah sebagai berikut
Salinan kode adalah sebagai berikut:
if (oevent.srcelement)
Otarget = oevent.srcelement;
kalau tidak
otarget = oevent.target;
Metode ini juga biasa digunakan di properti lain.