Mari kita ringkas hal -hal sederhana
Catatan: Metode berikut dibungkus dalam objek Eventutil, dan metode definisi literal objek digunakan secara langsung. . .
Metode Tersadinya Acara
addhandler: function (element, type, handler) {if (element.addeventListener) {// deteksi apakah itu adalah metode tingkat dom2 element.addeventListener (type, handler, false); } else if (element.attachevent) {// deteksi apakah itu metode level-level element.attachevent ("on" + type, handler); } else {// deteksi apakah itu elemen metode tingkat DOM0 ["on" + type] = handler; }}②Remove metode acara yang ditambahkan sebelumnya
lepas hapus: fungsi (elemen, ketik, pawang) {if (element.removeeventlistener) {element.removeeventListener (type, handler, false); } else if (element.detachevent) {element.detachevent ("on" + type, handler); } else {element ["on" + type] = null; }}③ Dapatkan target objek acara dan acara
// Dapatkan kompatibilitas objek acara yang ditulis dalam getEvent: function (event) {return event? Acara: Window.event; }, // Dapatkan kompatibilitas target objek acara yang ditulis dalam getTarget: function (event) {return event.target || event.srcelement; }④ Tulisan Penulisan untuk Memblokir Acara Default Browser
preventDefault: function (event) {if (event.preventDefault) {event.preventDefault (); } else {event.returnValue = false; }}⑤ Tulisan Tulis untuk Mencegah Acara dari Bubbled
stoppropagation: function (event) {if (event.stoppropagation) {event.stoppropagation (); } else {event.cancelbubble = true; }}Metode Metode mendapatkan elemen terkait hanya termasuk dalam acara mouseover dan mouseout
// Metode untuk mendapatkan elemen terkait yang termasuk dalam acara mouseover dan mouseout getrelatedTarget: function (event) {if (event.relatedTarget) {return event.relatedTarget; } else if (event.toElement) {return event.toElement; } else if (event.fromeLement) {return event.fromeLement; } else {return null; }}⑦ penilaian roda tikus
Untuk acara Mousedown dan MouseUp, ada properti tombol di objek acara.
Menunjukkan tombol yang ditekan atau dilepaskan. Atribut tombol DOM mungkin memiliki 3 nilai berikut: 0 mewakili tombol mouse utama, dan 1 mewakili mouse di tengah.
2 menunjukkan tombol mouse. Di pengaturan konvensional, tombol mouse utama adalah tombol mouse kiri, dan mouse kedua
Tombolnya adalah tombol mouse yang tepat.
IE8 dan versi sebelumnya juga memberikan atribut tombol, tetapi nilai atribut ini sangat berbeda dari atribut tombol DOM.
0: berarti tombol tidak ditekan.
1: Menunjukkan bahwa tombol mouse utama telah ditekan.
2: Menunjukkan bahwa tombol mouse telah ditekan dua kali.
3: Menunjukkan bahwa tombol mouse primer dan sekunder telah ditekan secara bersamaan.
4: Menunjukkan bahwa tombol mouse tengah telah ditekan.
5: Menunjukkan bahwa tombol mouse utama dan tombol mouse tengah telah ditekan secara bersamaan.
6: Ini berarti bahwa tombol mouse dan tombol mouse di tengah telah ditekan secara bersamaan.
7: Menunjukkan bahwa tiga tombol mouse telah ditekan secara bersamaan.
getButton: function (event) {if (document.implementation.hasfeature ("mouseEvents", "2.0")) {return event.button; } else {switch (event.button) {case 0: case 1: case 3: case 5: case 7: return 0; Kasus 2: Kasus 6: Return 2; Kasus 4: kembali 1; }}}⑧ Metode untuk mendapatkan nilai kenaikan roda mouse (delta)
getwheeldelta: function (event) {if (event.wheeldelta) {return (client.engine.opera && client.engine.opera <9.5? -event.wheeldelta: event.wheeldelta); } else {return -event.detail * 40; // Nilai di Firefox adalah +3 untuk menggulir ke atas, -3 untuk menggulir ke bawah}}⑨Squisition of encoding karakter dengan cara silang-browser
getCharCode: function (event) {if (typeof event.charcode == "angka") {return event.charcode; } else {return event.keycode; }}⑩ Akses data di clipboard
getClipboardText: function (event) {var clipboarddata = (event.clipboarddata || window.clipboarddata); return clipboarddata.getData ("teks"); }11. Atur data di clipboard
setClipboardText: function (event, value) {if (event.clipboarddata) {return event.clipboarddata.setData ("text/polos", value); } else if (window.clipboarddata) {return window.clipboarddata.setData ("text", value); }}Merangkumnya dan kemudian Anda dapat menggunakannya secara langsung.
Untuk file lengkap dan gaya reset CSS yang lebih mendasar dan lebih sedikit, lihat: https://github.com/luckywinty/resetfile
Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.