Apa itu acara lintas platform? Artinya, acara yang sama dieksekusi pada browser yang berbeda, dan metode yang digunakan berbeda.
Apa itu objek eventutil? Apa fungsinya? Artinya, sebuah wadah yang menggabungkan semua fungsi yang terkait dengan acara untuk memfasilitasi pengelolaan objek acara, dan tidak memiliki atribut. Ini terutama berkaitan dengan berjalan di antara acara DOM dan IE acara untuk membuatnya serupa mungkin.
Mari kita lihat sifat objek dan metode antara DOM dan IE untuk membandingkan (hanya ada sifat dan metode yang berbeda di antara keduanya). Ada lima poin utama:
| Properti dan Metode DOM | Yaitu properti dan metode |
| Charcode | kode kunci |
| pencegahdefault | returnValue = false |
| Target terkait | frombj | toobj |
| penghentian | BatalBuble = true |
| target | srcobj |
Mari kita lihat dengan demo kecil, yang dapat menyelesaikan masalah kompatibilitas lintas-platform dari peristiwa:
<html><head> <title>eventUtil</title> <script eventType="text/javascript"> var eventUtil = { // Listen to event addListener: function(obj, eventType, fn) { if (obj.addEventListener) { obj.addEventListener(eventType, fn, false); } lain jika (obj.attachevent) {obj.attachevent ('on' + eventType, fn); } else {obj ['on' + eventType] = fn; }}, // Kembalikan objek peristiwa getEvent: function (event) {return event || window.event; // Acara Kembali? Acara: Window.event; }, // Kembalikan objek acara target getTarget: function (event) {return event.target || event.srcobj; }, preventDefault: function (event) {if (event.preventdefault) {event.preventDefault (); } else {event.returnValue = false; }}, removelistener: function (obj, eventType, fn) {if (obj.removeeventListener) {obj.removeeventListener (eventType, fn, false); } lain jika (obj.deattachevent) {obj.detachevent (eventType, fn); } else {obj ['on' + eventType] = null; }}, stoppropagation: function (event) {if (event.stoppropagation) {event.stoppropagation (); } else {event.cancelbubble = true; }}}; </script> </head> <body> <input eventType = "tombol" value = "klik saya" id = "btn"/> <p> event </p> <a> Halo kata! var target = eventutil.getTarget (event); alert ("Nama saya Kock"); Peringatan (Event.eventType); waspada (target); Eventutil.Stoppropagation (Event); } function getBodyListen (event) {alert ("klik body"); } function getLinkListen (event) {alert ("Cegah acara default"); var event = eventutil.getEvent (event); eventutil.preventdefault (acara); } window.onload = function () {var btn = document.getObjbyId ("btn"); var link = document.getObjsbyTagname ("a") [0]; eventutil.addlistener (btn, "klik", addbtnlisten); eventutil.addlistener (document.body, "click", getBodyListen); eventutil.addlistener (tautan, "klik", getLinkListen); } </script> </body> </html>Metode di atas dapat menyelesaikan masalah peristiwa lintas platform. Selanjutnya, mari kita lihat properti charcode.
Pertama, tentukan metode baru untuk Eventutil, FormatEvent, menerima parameter, yaitu objek acara.
Eventutil.FormatEvent = function (event) {if (isie && iswin) {event.charcode = (event.type == "keypress")? event.keycode: 0; event.eventphase = 2;- Menunjukkan fase menggelegak, yaitu hanya mendukung acara pengembalian fase gelembung;}Dua: Tentang Target dan Currenttarget dalam menggelegak
Target berada dalam tahap target aliran acara; CurrentTarget berada dalam tahap penangkapan, target dan gelembung dari aliran acara. Hanya ketika aliran acara berada di tahap target, kedua pointer adalah sama, dan ketika berada di tahap penangkapan dan gelembung, target menunjuk ke objek yang diklik dan arus target menunjuk ke induk dari acara saat ini.
<Div id = "Outer" style = "latar belakang:#099"> <p> Saya adalah target div </p> ---- klik bagian ini, output: e.target.tagname: p || E.CurrentTarget.tagname: Div <p id = "Inner" style = "latar belakang:#9c0"> Saya adalah target p </p> --- klik bagian ini, output: e.target.tagname: p || E.CurrentTarget.tagname: Div <br> --- klik bagian ini, output: e.target.tagname: Div || E.CurrentTarget.tagname: Div </div> // Lihatlah kolom perubahan kedua: <div id = "OUTER" style = "latar belakang:#099"> <div> Saya adalah target div </div> ---- klik bagian ini, output: e.target.tagname: Div || E.CurrentTarget.tagname: Div <p id = "Inner" style = "latar belakang:#9c0"> Saya adalah target p </p> --- klik bagian ini, output: e.target.tagname: p || E.CurrentTarget.tagname: Div <br> --- klik bagian ini, output: e.target.tagname: Div || E.CurrentTarget.tagname: Div </div>
fungsi getobj (id) {return document.getElementById (id); } function addevent (obj, event, fn) {if (window.attachevent) {obj.attachevent ("on" + event, fn); } else if (window.addeventListener) {obj.addeventListener (event, fn, false); }} function test (e) {alert ("e.target.tagname:" + e.target.tagname + "/n e.currentTarget.tagname:" + e.currentTarget.tagname); } var outer = getObj ("outer"); var dalam = getObj ("dalam"); // addEvent (dalam, "klik", tes); addEvent (luar, "klik", tes);Tiga: Perbedaan antara IE dan DOM
| Dom | YAITU | |
| Dapatkan target | Event.target | event.srcelement |
| Dapatkan Kode Karakter | event.charcode | event.keycode |
| Blok perilaku default | event.prevetDefault () | event.returnValue = false |
| gelembung | event.stoppropagation () | event.cancelbubble = true |
Mengenai pemblokiran perilaku default, misalnya, ketika pengguna mengklik kanan mouse, jika Anda tidak ingin menu muncul, Anda dapat menggunakan perilaku default yang memblokir:
document.body.oncontextMenu = function (event) {if (isie) {var oevent = window.event; oevent.ReturnValue = false; // Ini juga dapat dikembalikan palsu secara langsung; mencegah perilaku default} else {oevent.preventdefault (); }}Empat: Acara Mouse
<p> Gunakan mouse Anda untuk mengklik dan mengklik dua kali kotak merah </p> <div onmouseover = "handleEvent (event)" onmouseout = "handleevent (event)" onmousedown = "handleevent (event)" onmouseup = "event)" event) "onsclick =" handleevent (event) "oNDblick =" event) "event)" onclick = "handleEvent (event)" oNdblick = "eventeAaA)" oFClick = "handleEvent (event)" oNDblick = "evereAaaaaaA (oFlEaA" "oMLEAA" "everAAA" "event)" event) "event) <event) (event) (event everaA. id="txt1" rows="5" cols="45"></textarea></p><!--Detection of keyboard events--><p><input type="text" id="textbox" onkeydown="handle(event)" onkeypress="handle(event)" onkeyup="handle(event)" ></p><p><textarea id="txt2" rows="10" cols = "45"> </pextarea> </p>
File JS adalah sebagai berikut:
function handleevent (event) {var otext = document.geteLementById ('txt1'); OTEXT.VALUE+= "/N"+Event.Type; OTEXT.VALUE+= "/N Target adalah"+(event.srcelement || event.target) .id; Otext.Value+= "/n at ("+event.clientx+","+event.clienty+") di klien"; OTEXT.VALUE+= "/N Button Down adalah"+event.button; var arrkeys = []; OTEXT.VALUE+= "/N RelatiedTarget adalah"+event.relatedTarget.tagname; //event.relatedTarget.tagname dapat menentukan sumber dan sumber fungsi fungsi mouse} (peristiwa) {var otext2 = document.geteLementById ('txt2'); Otext2.Value+= "/n"+event.type; var arrkeys = []; if (event.shiftkey) {arrkeys.push ("shift");} if (event.ctrlkey) {arrkeys.push ("ctrl");} if (event.altkey) {arrkeys.push ("alt");} otext2.value+= "/n keydown is"+arrkeys;Ringkasan di atas dari insiden yang paling diabaikan di JS adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.