Jenis Acara

Pada hari-hari awal World Wide Web, pembangun web terpaksa berurusan dengan hanya sebilangan kecil acara: "muat", "klik", "mouseover" dan lain-lain. Jenis acara yang agak lama ini disokong dengan baik oleh semua pelayar. Apabila platform web berkembang, antara muka aplikasi yang lebih berkuasa telah disertakan dan bilangan acara meningkat dengan ketara. Tiada piawaian yang mentakrifkan set lengkap acara dan bilangan acara yang disokong terus berkembang dengan pesat. Peristiwa baharu ini ditakrifkan dalam dua sumber berikut:

Spesifikasi "Peristiwa Tahap 3 DOM", yang, selepas bertahun-tahun bertakung, mula dibangunkan secara aktif di bawah naungan konsortium W3C.

Banyak antara muka aplikasi baharu dalam spesifikasi HTML5 (dan spesifikasi tambahan yang berkaitan) mentakrifkan acara baharu yang digunakan, contohnya, untuk mengurus sejarah penyemakan imbas, fungsi seret dan lepas, pemesejan antara dokumen dan memainkan audio dan video.

Sila ambil perhatian bahawa kebanyakan jenis acara baharu ini belum lagi disokong secara meluas dan ditakrifkan mengikut piawaian yang masih dalam fasa reka bentuk. Acara yang paling kerap anda gunakan dalam aplikasi web anda lazimnya ialah acara lama yang disokong oleh semua penyemak imbas: acara tetikus, acara papan kekunci, acara borang HTML dan acara Tetingkap. Kami akan mempertimbangkan peristiwa ini.

Peristiwa Pemuatan Dokumen

Kebanyakan aplikasi web benar-benar memerlukan penyemak imbas web untuk memberitahu mereka apabila dokumen telah selesai dimuat turun dan bersedia untuk melaksanakan operasi padanya. Acara beban pada objek Window berfungsi untuk tujuan ini. Acara pemuatan dicetuskan hanya selepas dokumen dan semua imejnya dimuatkan sepenuhnya. Walau bagaimanapun, skrip biasanya boleh dijalankan serta-merta selepas dokumen dihuraikan, sebelum imej dimuatkan. Anda boleh mengurangkan masa permulaan aplikasi web dengan ketara jika anda mula melaksanakan skrip pada acara selain daripada memuatkan.

Acara DOMContentLoaded dibangkitkan setelah dokumen dimuatkan, dihuraikan dan sebarang skrip tertunda telah dilaksanakan. Pada ketika ini, imej dan skrip dengan atribut async mungkin terus dimuatkan, tetapi dokumen itu sendiri akan sedia untuk operasi. Acara ini mula-mula diperkenalkan dalam Firefox dan kemudiannya diterima pakai oleh semua pengeluar penyemak imbas lain, termasuk Microsoft, yang menambah sokongan untuk acara ini dalam IE9. Walaupun awalan DOM dalam nama, acara ini bukan sebahagian daripada piawaian Acara Tahap 3 DOM, tetapi ia diseragamkan oleh spesifikasi HTML5.

Apabila dokumen dimuatkan, nilai harta document.readyState berubah. Setiap perubahan dalam nilai harta ini dalam IE disertakan dengan acara readystatechange pada objek Dokumen, jadi dalam IE acara ini boleh digunakan untuk menentukan apabila keadaan lengkap berlaku. Spesifikasi HTML5 menyeragamkan acara readystatechange, tetapi memerlukannya untuk menyala serta-merta sebelum acara pemuatan, jadi tidak jelas sepenuhnya tentang kelebihan acara readystatechange berbanding acara pemuatan.

Contoh di bawah mentakrifkan fungsi whenReady(). Fungsi yang dihantar ke whenReady() dipanggil (sebagai kaedah objek Dokumen) sebaik sahaja dokumen sedia untuk operasi. whenReady() menunggu acara DOMContentLoaded dan readystatechange dan menggunakan acara muat hanya sebagai sandaran sekiranya ia digunakan dalam penyemak imbas lama yang tidak menyokong dua acara pertama. Fungsi whenReady() akan digunakan dalam beberapa senario seperti berikut:

/* Lulus whenReady() fungsi anda dan ia akan memanggilnya (sebagai kaedah pada objek dokumen) setelah dokumen selesai menghurai dan bersedia untuk melaksanakan operasi. Fungsi berdaftar dipanggil pada acara DOMContentLoaded, readystatechange atau muatkan yang pertama. Setelah dokumen sedia dan semua fungsi telah dipanggil, whenReady() akan segera memanggil semua fungsi yang telah dihantar kepadanya. */ var whenReady = (function() ( // Fungsi ini dikembalikan oleh fungsi whenReady() var funcs = ; // Fungsi yang perlu dipanggil pada acara var ready = false; // Akan menerima nilai true apabila fungsi pengendali dipanggil // Pengendali peristiwa , yang dipanggil sebaik sahaja dokumen // bersedia untuk melaksanakan fungsi pengendalian pengendali(e) ( // Jika pengendali telah dipanggil, hanya kembalikan kawalan jika (sedia) kembali; / / Jika ini ialah acara readystatechange dan keadaan telah menerima nilai, // cemerlang daripada "complete" bermakna dokumen belum siap lagi jika (e.type==="readystatechange" && document.readyState !== "complete" ) return; // Panggil semua fungsi yang didaftarkan // Ambil perhatian bahawa setiap satu ada di sini Nilai // sifat funcs.length ditandakan sekali, sekiranya salah satu fungsi yang dipanggil // mendaftarkan fungsi tambahan untuk(var i = 0. i.

Peristiwa tetikus

Terdapat banyak peristiwa yang berkaitan dengan tetikus. Kesemuanya disenaraikan dalam jadual di bawah. Semua acara tetikus kecuali mouseenter dan gelembung meninggalkan tetikus. Peristiwa klik yang berlaku pada pautan dan butang hantar borang mempunyai tindakan lalai yang boleh dibatalkan. Secara teorinya mungkin untuk membatalkan acara menu konteks dan menghalang menu konteks daripada muncul, tetapi sesetengah penyemak imbas mempunyai tetapan yang menjadikan acara ini tidak boleh dibatalkan.

Acara Tetikus JavaScript Jenis Penerangan

klik	Peristiwa peringkat tinggi yang dibangkitkan apabila pengguna menekan dan melepaskan butang tetikus atau sebaliknya mengaktifkan elemen.
menu konteks	Acara boleh dibatalkan dibangkitkan sebelum menu konteks dipaparkan. Pelayar semasa memaparkan menu konteks pada klik kanan, jadi acara ini juga boleh digunakan sebagai acara klik.
dblclick	Menyala apabila pengguna mengklik dua kali.
turun tetikus	Terbakar apabila pengguna menekan butang tetikus.
tetikus	Terbakar apabila pengguna melepaskan butang tetikus.
gerak tetikus	Menyala apabila pengguna menggerakkan penuding tetikus.
tetikus	Menyala apabila penunjuk tetikus diletakkan di atas elemen. Sifat relatedTarget (atau fromElement dalam IE) menentukan elemen dari mana penuding tetikus dialihkan.
keluar tetikus	Menyala apabila penunjuk tetikus meninggalkan elemen. Sifat relatedTarget (atau toElement dalam IE) menentukan elemen yang penuding tetikus dialihkan.
tetikus masuk	Sama seperti alih tetikus, tetapi tidak muncul. Pertama kali diperkenalkan dalam IE dan diseragamkan dalam HTML5, tetapi belum disokong oleh semua pelayar.
daun tikus	Sama seperti mouseout, tetapi tidak muncul. Pertama kali diperkenalkan dalam IE dan diseragamkan dalam HTML5, tetapi belum disokong oleh semua pelayar.

Objek yang dihantar kepada pengendali acara tetikus mempunyai sifat clientX dan clientY yang menentukan koordinat penuding berbanding tetingkap. Untuk menukarnya kepada koordinat dokumen, anda perlu menambah kedudukan bar skrol tetingkap padanya.

Hartanah altKey, ctrlKey, metaKey Dan shiftKey tentukan keadaan pelbagai kekunci pengubah suai yang boleh ditahan semasa acara: dengan bantuan mereka, anda boleh membezakan klik mudah daripada klik dengan kekunci Shift ditekan, sebagai contoh.

Sifat butang menentukan butang tetikus yang ditekan pada masa acara itu. Walau bagaimanapun, penyemak imbas yang berbeza menulis nilai yang berbeza untuk harta ini, jadi ia sukar untuk digunakan dalam cara mudah alih.

Sesetengah penyemak imbas hanya melancarkan acara klik apabila butang kiri diklik. Oleh itu, jika anda perlu mengendalikan klik daripada butang lain, anda harus menggunakan acara turun tetikus dan naik tetikus. Acara menu konteks biasanya memberi isyarat bahawa klik kanan telah dilakukan, tetapi seperti yang dinyatakan di atas, pengendali acara ini tidak selalu dapat menghalang menu konteks daripada muncul.

Contoh di bawah menunjukkan fungsi seret(), yang, apabila dipanggil dari pengendali acara turun tetikus, membolehkan pengguna menyeret elemen dokumen yang diposisikan secara mutlak dengan tetikus. Fungsi drag() berfungsi dengan kedua-dua model acara DOM dan IE.

Fungsi drag() mengambil dua argumen. Yang pertama ialah elemen yang diseret. Ini mungkin elemen di mana peristiwa turun tetikus berlaku dan elemen yang mengandunginya (contohnya, anda boleh membenarkan pengguna menyeret tetikus pada elemen yang kelihatan seperti bar tajuk tetingkap dan menyeret elemen yang mengandungi yang kelihatan seperti tetingkap) . Walau bagaimanapun, dalam apa jua keadaan, ia mestilah elemen dokumen yang diletakkan secara mutlak menggunakan atribut kedudukan CSS. Argumen kedua ialah objek acara yang diterima dengan acara turun tetikus:

/* drag() - menyeret elemen HTML yang diposisikan secara mutlak. Fungsi ini mesti dipanggil daripada pengendali acara onmousedown. Peristiwa mousemove seterusnya akan menyebabkan elemen yang ditentukan dialihkan. Acara mouseup akan melengkapkan pergerakan. Pelaksanaan ini berfungsi dalam kedua-dua model acara standard dan IE. Menggunakan fungsi getScrollOffsets(). Argumen: elementToDrag: Elemen yang menerima acara turun tetikus atau elemen yang mengandungi. Elemen ini mesti mempunyai kedudukan mutlak. Nilai sifat style.left dan style.topnya akan berubah apabila pengguna menggerakkan penuding tetikus. acara: objek Acara yang diterima oleh pengendali acara turun tetikus. */ function drag(elementToDrag, event) ( // Tukar koordinat awal penuding tetikus kepada koordinat dokumen var scroll = getScrollOffsets(); // Fungsi helper diisytiharkan di bawah var startX = event.clientX + scroll.x; var startY = event. clientY + scroll.y; // Koordinat awal (relatif kepada permulaan dokumen) elemen yang // akan dialihkan Oleh kerana elementToDrag mempunyai kedudukan mutlak, // sifat offsetParentnya diandaikan merujuk kepada dokumen badan var origX = elemenToDrag.offsetLeft; acara turun tetikus. if (document.addEventListener) ( // Model acara standard // Daftar pengendali memintas dalam dokumen document.addEventListener("mousemove", moveHandler, true); document.addEventListener("mouseup", upHandler, true); ) else if (document.attachEvent) ( // model acara IE untuk IE5-8 // Dalam model acara IE, peristiwa ditangkap dengan memanggil // kaedah setCapture() elemen. elementToDrag.setCapture(); elementToDrag.attachEvent( "onmousemove", moveHandler); elementToDrag.attachEvent("onmouseup", upHandler); tidak diserahkan kepada pengendali lain jika (event) .stopPropagation) event.stopPropagation(); // Model standard else event.cancelBubble = benar; // IE // Halang tindakan lalai daripada berjalan. jika (event.preventDefault) event.preventDefault(); // Model standard else event.returnValue = palsu; // IE /* Pengendali ini memintas peristiwa mousemove yang berlaku semasa elemen sedang diseret. Ia bertanggungjawab untuk memindahkan elemen. */ function moveHandler(e) ( if (!e) e = window.event; // Model Acara IE // Gerakkan elemen ke kedudukan penunjuk tetikus, dengan mengambil kira kedudukan bar skrol // dan mengimbangi relatif kepada klik awal. var scroll = getScrollOffsets( ); elementToDrag.style.left = (e.clientX + scroll.x - deltaX) + "px"; elementToDrag.style.top = (e.clientY + scroll.y - deltaY) + "px" ; penyebaran lebih lanjut acara jika (e.stopPropagation) e.stopPropagation(); // Model standard else e.cancelBubble = true; // IE ) /* Pengendali ini memintas acara tetikus akhir yang menamatkan operasi seret. */ function upHandler(e) ( if (!e) e = window.event; // Model Acara IE // Alih keluar pengendali acara memintas. if (document.removeEventListener) ( // Model Acara DOM document.removeEventListener("mouseup" , upHandler, true); document.removeEventListener("mousemove", moveHandler, true) else if (document.detachEvent) ( // IE 5+ Event Model elementToDrag.detachEvent("onlosecapture", upHandler); elementToDrag.detachEvent( "onmouseup ", upHandler); elementToDrag.detachEvent("onmousemove", moveHandler); elementToDrag.releaseCapture(); // Dan hentikan penyebaran acara selanjutnya. e.cancelBubble = true; // IE ) ) // Mengembalikan kedudukan bar skrol semasa kerana sifat x dan y bagi fungsi objek getScrollOffsets(w) ( // Gunakan tetingkap yang ditentukan atau yang semasa // jika fungsi dipanggil tanpa hujah w = w | | tetingkap; // Kaedah berikut berfungsi dalam semua pelayar kecuali IE versi 8 dan ke bawah jika (w.pageXOffset != null) kembali (x: w.pageXOffset, y:w.pageYOffset); // Untuk IE (dan pelayar lain) dalam mod standard var d = w.document; jika (document.compatMode == "CSSICompat") kembalikan (x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop); // Untuk pelayar dalam mod keserasian kembali ( x: d.body.scrollLeft, y: d.body.scrollTop ); )

Coretan berikut menunjukkan cara menggunakan fungsi seret() dalam fail HTML:

Heret saya

Ini adalah ujian. Semak, semak, semak.

Perkara yang paling penting di sini ialah atribut onmousedown pada elemen bersarang. Ambil perhatian bahawa ia menggunakan sifat this.parentNode. Ini bermakna keseluruhan elemen bekas akan bergerak.

Peristiwa input teks

Penyemak imbas menyokong tiga acara input papan kekunci lama. Acara keydown dan keyup adalah acara peringkat rendah dan dibincangkan dalam bahagian seterusnya. Walau bagaimanapun, acara penekan kekunci ialah acara peringkat tinggi yang melaporkan bahawa aksara boleh cetak telah dimasukkan.

Spesifikasi draf Acara Tahap 3 DOM mentakrifkan peristiwa input teks yang lebih umum yang dicetuskan sebagai tindak balas kepada input teks, tanpa mengira cara ia dimasukkan.

Dengan acara textinput yang dicadangkan dan acara textInput yang sedang dilaksanakan, objek acara mudah diluluskan yang mempunyai sifat data yang menyimpan teks yang dimasukkan. (Sifat lain yang dicadangkan oleh spesifikasi, inputMethod, harus menyatakan sumber input, tetapi belum dilaksanakan.) Untuk input papan kekunci, sifat data biasanya akan mengandungi satu aksara, tetapi untuk input daripada sumber lain ia boleh mengandungi banyak aksara .

Objek acara yang diluluskan dengan acara tekan kekunci mempunyai organisasi yang lebih kompleks. Peristiwa tekan kekunci mewakili input satu aksara. Watak ini terkandung dalam objek acara sebagai nilai titik kod Unicode berangka dan untuk menukarnya kepada rentetan, anda mesti menggunakan kaedah String.fromCharCode(). Dalam kebanyakan penyemak imbas, titik kod aksara yang dimasukkan disimpan dalam sifat KeyCode objek acara. Walau bagaimanapun, atas sebab sejarah, Firefox menggunakan harta itu sebaliknya charCode.

Dalam kebanyakan penyemak imbas, acara tekan kekunci dicetuskan hanya apabila aksara boleh cetak dimasukkan. Walau bagaimanapun, dalam Firefox, acara penekan kekunci juga dibangkitkan untuk aksara bukan pencetakan. Untuk membezakan antara dua kes ini (dan mengabaikan aksara tidak boleh dicetak), anda boleh menyemak sama ada sifat charCode objek acara wujud dan sama ada ia mengandungi nilai 0.

Input teks, textInput dan acara tekan kekunci boleh dibatalkan untuk menghalang aksara daripada dimasukkan. Iaitu, peristiwa ini boleh digunakan untuk menapis input. Sebagai contoh, anda boleh menghalang aksara abjad daripada dimasukkan ke dalam medan yang dimaksudkan untuk kemasukan data berangka.

Contoh di bawah menunjukkan modul JavaScript yang melaksanakan penapisan jenis ini. Ia mencari elemen dengan atribut data-allowed-chars tambahan (bukan standard). Mendaftarkan textinput, textInput dan pengendali acara tekan kekunci untuk semua elemen yang ditemui dan mengehadkan input kepada aksara ekspresi biasa yang dinyatakan dalam atribut data-allowed-chars:

/* Penapisan input untuk elemen Modul ini mencari semua elemen dalam dokumen yang mempunyai atribut "data-allowed-chars". Mendaftarkan penekan kekunci, textinput dan textInput pengendali acara untuk elemen ini untuk menyekat set aksara yang dibenarkan untuk input untuk membenarkan hanya aksara yang dinyatakan dalam atribut untuk dimasukkan. Jika elemen juga mempunyai atribut "data-messageid", nilai atribut itu ditafsirkan sebagai id elemen dokumen lain. Jika pengguna memasukkan aksara yang tidak sah, elemen dengan id yang ditentukan akan kelihatan. Jika pengguna memasukkan aksara yang sah, elemen mesej disembunyikan. Elemen mesej ini bertujuan untuk memaparkan penjelasan mengapa input pengguna ditolak. Reka bentuknya mesti dilaksanakan menggunakan CSS supaya ia pada mulanya tidak kelihatan. */ whenReady(function () ( // Panggil fungsi ini apabila dokumen dimuatkan // Cari semua elemen var inputelts = document.getElementsByTagName("input"); // Gelung melaluinya untuk(var i = 0 ; i< inputelts.length; i++) { var elt = inputelts[i]; // Пропустить элементы, не являющиеся текстовыми полями ввода // и не имеющие атрибута data-allowed-chars if (elt.type != "text" || !elt.getAttribute("data-allowed-chars")) continue; // Зарегистрировать наш обработчик события в этом элементе input // keypress старое событие и реализовано во всех браузерах. // textInput поддерживается в Safari и Chrome с 2010 года. // textinput версия проекта стандарта "DOM Level 3 Events". if (elt.addEventListener) { elt.addEventListener("keypress", filter, false); elt.addEventListener("textInput", filter, false); elt.addEventListener("textinput", filter, false); } // textinput не поддерживается версиями IE, в которых не реализован // метод addEventListener() else { elt.attachEvent("onkeypress", filter); } } // Обработчик событий keypress и textInput, фильтрующий ввод пользователя function filter(event) { // Получить объект события и целевой элемент target var e = event || window.event; // Модель стандартная или IE var target = e.target || e.srcElement; // Модель стандартная или IE var text = null; // Введенный текст // Получить введенный символ или текст if (e.type === "textinput" || e.type === "textInput") text = e.data; else { // Это было событие keypress // Введенный печатаемый символ в Firefox сохраняется в свойстве charCode var code = e.charCode || e.keyCode; // Если была нажата какая либо функциональная клавиша, не фильтровать ее if (code < 32 || // Управляющий символ ASCII e.charCode == 0 || // Функциональная клавиша (в Firefox) e.ctrlKey || e.altKey) // Удерживаемая клавиша-модификатор return; // Не фильтровать это событие // Преобразовать код символа в строку var text = String.fromCharCode(code); } // Отыскать необходимую нам информацию в этом элементе input var allowed = target.getAttribute("data-allowed-chars"); // Допустимые символы var messageid = target.getAttribute("data-messageid"); // Сообщение id if (messageid) // Если указано значение id, получить элемент var messageElement = document.getElementById(messageid); // Обойти в цикле символы во введенном тексте for(var i = 0; i < text.length; i++) { var c = text.charAt(i); allowed = new RegExp(allowed, "i"); // Создаем регулярное выражение if (c.search(allowed) == -1) { // Недопустимый символ? // Отобразить элемент с сообщением, если указан if (messageElement) messageElement.style.visibility="visible"; // Отменить действия по умолчанию, чтобы предотвратить вставку текста if (e.preventDefault) e.preventDefault(); if (e.returnValue) e.returnValue = false; return false; } } // Если все символы оказались допустимыми, скрыть элемент // с сообщением, если он был указан if (messageElement) messageElement.style.visibility = "hidden"; } });

Di bawah ialah contoh markup HTML menggunakan modul ini:

Sila isi borang.

Maklumat hubungan Huruf Nama sahaja
Nombor Telefon sahaja
E-mel E-mel salah

Rajah di bawah menunjukkan penggunaan borang ini. Di sini, selepas memasukkan nama, saya memasukkan nombor, yang disekat secara automatik dan mesej amaran muncul:

Tekan kekunci dan peristiwa input teks dicetuskan sejurus sebelum teks baharu benar-benar dimasukkan ke dalam elemen dokumen yang mempunyai fokus input, jadi pengendali untuk acara ini boleh menghalang teks daripada disisipkan dengan membatalkan acara.

Penyemak imbas juga melaksanakan acara input, yang dicetuskan apabila teks dimasukkan ke dalam elemen. Acara ini tidak boleh dibatalkan dan objek acara yang sepadan tidak mengandungi maklumat tentang teks yang disisipkan - ia hanya memberitahu bahawa kandungan teks elemen telah berubah. Jika, sebagai contoh, anda ingin memastikan bahawa hanya aksara besar dimasukkan, anda boleh menentukan pengendali acara input seperti yang ditunjukkan di bawah:

Acara input diseragamkan dalam spesifikasi HTML5 dan disokong oleh semua pelayar moden kecuali IE. Kesan serupa dalam IE boleh dicapai dengan mengesan perubahan dalam sifat nilai elemen input teks menggunakan peristiwa tersuai penukaran harta.

Acara papan kekunci

Acara keydown dan keyup dinaikkan apabila pengguna menekan atau melepaskan kekunci pada papan kekunci. Ia dijana untuk kekunci pengubah suai, kekunci fungsi dan kekunci abjad angka. Jika pengguna menahan kekunci cukup lama untuk mencetuskan mod auto ulang, banyak peristiwa kekunci akan dijana sebelum peristiwa kekunci berlaku.

Objek acara yang sepadan dengan peristiwa ini mempunyai sifat KeyCode dengan nilai angka yang mengenal pasti kekunci yang ditekan. Untuk kekunci yang menjana aksara boleh cetak, secara amnya sifat kod kunci mengandungi titik kod Unikod yang sepadan dengan aksara asas yang digambarkan pada kekunci. Kekunci huruf sentiasa menjana nilai kod kunci yang sepadan dengan aksara huruf besar, tanpa mengira keadaan kekunci Shift, kerana itu adalah aksara yang digambarkan pada kekunci.

Begitu juga, kekunci angka sentiasa menjana nilai Kod kunci yang sepadan dengan aksara angka yang digambarkan pada kekunci, walaupun anda menahan kekunci Shift untuk memasukkan tanda baca. Untuk kunci yang tidak sepadan dengan aksara boleh cetak, sifat keyCode akan mempunyai beberapa nilai lain. Nilai sifat keyCode ini tidak pernah diseragamkan. Walau bagaimanapun, mereka tidak begitu berbeza antara pelayar sehingga mudah alih tidak dapat dicapai.

Seperti objek acara tetikus, objek acara papan kekunci mempunyai sifat altKey , ctrlKey , metaKey dan shiftKey yang menilai kepada benar jika kekunci pengubah suai sepadan ditahan semasa peristiwa itu berlaku.

Acara keydown dan keyup serta sifat KeyCode telah digunakan selama lebih sedekad, tetapi ia tidak pernah diseragamkan. Draf Acara Tahap 3 DOM menyeragamkan jenis acara keydown dan keyup, tetapi tidak menyeragamkan sifat KeyCode. Sebaliknya, ia mentakrifkan sifat baharu, kunci, yang sepatutnya mengandungi nama kunci sebagai rentetan. Jika kunci sepadan dengan aksara boleh cetak, sifat kunci mesti mengandungi aksara boleh cetak itu. Untuk kekunci fungsi, sifat kunci mesti mengandungi nilai seperti F2, Rumah atau Kiri.

Pada masa penulisan ini, sifat utama yang ditakrifkan oleh standard Acara Tahap 3 DOM belum lagi dilaksanakan dalam mana-mana penyemak imbas. Walau bagaimanapun, penyemak imbas berasaskan Webkit, Safari dan Chrome mentakrifkan sifat dalam objek acara ini: pengecam kunci. Untuk kekunci fungsi, seperti sifat kunci, sifat Pengecam kunci tidak mengandungi nombor tetapi rentetan dengan nama kunci, seperti Shift atau Enter. Untuk kunci yang sepadan dengan aksara yang boleh dicetak, sifat ini mengandungi perwakilan rentetan yang kurang boleh digunakan bagi titik kod Unikod aksara itu. Sebagai contoh, kekunci A sepadan dengan nilai U+0041.

Contoh di bawah mentakrifkan kelas Keymap yang memetakan pengecam gabungan kekunci seperti PageUp, Alt_Z dan ctrl+alt+shift+F5 kepada fungsi JavaScript yang dipanggil sebagai tindak balas kepada kombinasi kekunci yang ditekan. Takrifan pengikat utama dihantar kepada pembina Keymap() dalam bentuk objek JavaScript yang nama hartanya sepadan dengan pengecam gabungan kunci, dan nilai hartanya mengandungi rujukan kepada fungsi pengendali. Menambah dan mengalih keluar binding dilakukan menggunakan kaedah bind() dan unbind().

Objek Keymap dipasang ke dalam elemen HTML (biasanya objek Dokumen) menggunakan kaedah install(). Apabila objek Keymap ditetapkan, pengendali acara kekunci didaftarkan dengan elemen ini. Setiap kali kekunci ditekan, pengendali menyemak untuk melihat sama ada terdapat fungsi yang sepadan dengan gabungan itu. Jika fungsi itu wujud, ia dipanggil.

Pengendali acara keydown menggunakan sifat kunci yang ditakrifkan oleh standard Acara Tahap 3 DOM, jika wujud. Jika tidak, ia cuba menggunakan harta Pengecam kunci Webkit. Dan sebagai sandaran, pengendali menggunakan sifat keyCode bukan standard:

// Fungsi pembina fungsi Peta kunci(bindings) ( this.map = (); // Tentukan pengenal pemetaan->pengendali jika (bindings) ( // Salin peta pengikatan awal ke dalamnya untuk(nama dalam binding) this.bind( nama, bindings); ) ) // Mengikat pengecam kunci yang ditentukan kepada pengendali fungsi yang ditentukan Keymap.prototype.bind = function(key, func) ( this.map = func; ); // Mengeluarkan pengikatan untuk ID kunci yang ditentukan Keymap.prototype.unbind = function(key) ( delete this.map; ); // Memasang objek Keymap ini ke dalam elemen HTML yang ditentukan Keymap.prototype.install = function(elemen) ( var keymap = this; // Define event handler functions function handler(event) ( return keymap.dispatch(event, element); ) // Set it if (element.addEventListener) element.addEventListener("keydown", handler, false); else if (element.attachEvent) element.attachEvent("onkeydown", handler); // Kaedah ini mewakilkan pengendalian acara papan kekunci, bergantung pada pengikatan Keymap.prototype.dispatch = function(event, element) ( // Pada mulanya tiada nama kunci pengubah suai atau nama kunci var modifiers = ""; var keyname = null; / / Bina rentetan pengubah dalam bentuk kanonik daripada aksara // dalam huruf kecil, susunkannya mengikut susunan abjad jika (event.altKey) pengubah += "alt_"; jika (event.ctrlKey) pengubah += "ctrl_" .metaKey) pengubah += "meta_"; if (event.shiftKey) modifiers += "shift_"; // Nama kunci mudah diperoleh jika sifat kunci // ditakrifkan oleh standard DOM Level 3 dilaksanakan: if (event.key) keyname = event.key; // Untuk mendapatkan nama kunci fungsi dalam Safari dan Chrome, anda boleh // menggunakan sifat keyIdentifier else if(event.keyIdentifier && event.keyIdentifier.substring(0,2) !== "U+") keyname = event. keyIdentifier; // Jika tidak, anda boleh menggunakan sifat kod kunci // dan paparan kod > nama di bawah nama kunci lain = Keymap.keyCodeToKeyName; // Jika nama kunci tidak dapat ditentukan, abaikan sahaja acara // dan kawalan kembali. jika (!nama kunci) kembali; // Pengecam kunci kanonik terdiri daripada nama pengubah suai // dan nama kekunci huruf kecil var keyid = pengubah + keyname.toLowerCase(); // Semak sama ada terdapat pengikatan untuk pengendali var ID kunci yang diberikan = this.map; if (pengendali) ( // Jika pengendali adalah untuk kunci yang diberikan, panggilnya // Panggil fungsi pengendali var retval = handler.call(elemen, acara, keyid); // Jika pengendali mengembalikan palsu, batalkan lalai / / dan batalkan acara menggelegak jika (retval === false) ( if (event.stopPropagation) event.stopPropagation(); // model DOM else event.cancelBubble = true; // model IE jika (event.preventDefault) event.preventDefault (); // / DOM else event.returnValue = false; // IE ) // Kembalikan nilai yang diterima daripada pengembalian pulangan pengendali; // Fungsi pembantu untuk menukar pengecam kunci kepada bentuk kanonik. // Kita perlu menukar pengecam "meta" kepada "ctrl" untuk menukar // pengecam Meta-C menjadi "Command-C" pada Mac dan menjadi "Ctrl-C" pada orang lain. Keymap.normalize = function(keyid) ( keyid = keyid.toLowerCase(); // Untuk huruf kecil var words = keyid.split(/\s+|[\-+_]/); // Pilih pengubahsuai var keyname = perkataan . pop(); // keyname ialah kata kunci nama terakhir = Keymap.aliases || ) Keymap.aliases = ( // Petakan alias kunci biasa kepada nama // "rasmi" mereka yang digunakan dalam DOM Tahap 3 dan peta kod kunci // kepada nama di bawah. Nama dan nilai mesti terdiri daripada aksara kecil sahaja "melarikan diri" :"esc", "return":"enter", "delete":"del", "ctrl":"control", "space":"spacebar", "ins":"insert" ); // Harta kod kunci lama objek acara kekunci tidak diseragamkan // Tetapi nilai berikut boleh digunakan dengan jayanya dalam kebanyakan penyemak imbas dan OS. Keymap.keyCodeToKeyName = ( // Kekunci dengan perkataan atau anak panah padanya 8:"Backspace", 9:"Tab", 13:"Enter", 16:"Shift", 17:"Control", 18:"Alt", 19:"Jeda", 20:"CapsLock", 27:"Esc", 32:"Spacebar", 33:"PageUp", 34:"PageDown", 35:"End", 36:"Home", 37: "Kiri", 38:"Atas", 39:"Kanan", 40:"Bawah", 45:"Sisip", 46:"Del", // Kekunci nombor pada papan kekunci utama (bukan pada papan kekunci tambahan) 48 :"0 ",49:"1",50:"2",51:"3",52:"4",53:"5",54:"6",55:"7",56:" 8", 57:"9", // Kekunci huruf. Sila ambil perhatian bahawa tiada perbezaan antara aksara besar dan kecil 65: "A", 66: "B", 67: "C", 68: "D" , 69 :"E", 70:"F", 71:"G", 72:"H", 73:"I", 74:"J", 75:"K", 76:"L", 77 :" M", 78:"N", 79:"O", 80:"P", 81:"Q", 82:"R", 83:"S", 84:"T", 85:" U" , 86:"V", 87:"W", 88:"X", 89:"Y", 90:"Z", // Kekunci angka pada papan kekunci tambahan dan kekunci dengan tanda baca // (Bukan disokong dalam. Opera.) 96:"0",97:"1",98:"2",99:"3",100:"4",101:"5",102:"6",103: "7" ,104:"8", 105:"9",106:"Darab", 107:"Tambah", 109:"Tolak", 110:"Perpuluhan", 111:"Bahagi", // Kekunci fungsi 112:" F1", 113:"F2", 114:"F3", 115:"F4", 116:"F5", 117:"F6", 118:"F7", 119:"F8", 120: "F9" , 121:"F10", 122:"F11", 123:"F12", 124:"F13", 125:"F14", 126:"F15", 127:"F16", 128:"F17 ", 129 :"F18", 130:"F19", 131:"F20", 132:"F21", 133:"F22", 134:"F23", 135:"F24", // Kekunci dengan tanda baca , untuk input yang tidak memerlukan // menahan kekunci Shift. // Tanda sempang tidak boleh digunakan dalam cara mudah alih: FF mengembalikan // kod yang sama seperti untuk kekunci Tolak 59:";", 61:"=", 186:";", 187:"=", // Firefox dan Opera mengembalikan 59.61 188:",", 190:".", 191:"/", 192:"`", 219:"[", 220:"\\", 221:"]", 222: """ );

Di bawah ialah contoh menggunakan objek Keymap:

Window.onload = function() ( var keymap = new Keymap; // Cipta objek Keymap baru keymap.bind("ctrl+a", // Kombinasi Ctrl+A function(event, keyid) ( alert("Anda menekan: " + keyid) )); // Satu lagi mengikat Ctrl + Enter keymap.bind("ctrl+enter", function(event, keyid) ( alert("You clicked: " + keyid) )); body); // Set objek Keymap untuk keseluruhan dokumen );

Peristiwa ialah tindakan atau kejadian yang berlaku dalam sistem yang anda aturcarakan, yang diberitahu oleh sistem kepada anda supaya anda boleh membalasnya dalam beberapa cara jika dikehendaki. Contohnya, jika pengguna mengklik butang pada halaman web, anda mungkin mahu membalas tindakan tersebut dengan memaparkan kotak maklumat. Dalam artikel ini, kami membincangkan beberapa konsep penting yang mengelilingi acara dan melihat cara ia berfungsi dalam penyemak imbas. Ini tidak akan menjadi kajian menyeluruh yang anda perlu tahu pada peringkat ini.

Prasyarat: Objektif:

Celik komputer asas, pemahaman asas HTML dan CSS, langkah pertama JavaScript.

Untuk memahami teori asas peristiwa, cara ia berfungsi dalam penyemak imbas, dan cara peristiwa mungkin berbeza dalam persekitaran pengaturcaraan yang berbeza.

Satu siri peristiwa bertuah

Seperti yang dinyatakan di atas, peristiwa ialah tindakan atau kejadian yang berlaku dalam sistem yang anda aturcarakan - sistem menghasilkan (atau "membakar") isyarat dalam beberapa jenis apabila peristiwa berlaku, dan juga menyediakan mekanisme yang mana beberapa jenis tindakan boleh diambil secara automatik (iaitu, beberapa kod berjalan) apabila peristiwa itu berlaku. Contohnya di lapangan terbang apabila landasan jelas untuk pesawat berlepas, isyarat disampaikan kepada juruterbang, dan akibatnya, mereka mula memandu pesawat.

Dalam kes Web, peristiwa dicetuskan dalam tetingkap penyemak imbas dan cenderung untuk dilampirkan pada item tertentu yang berada di dalamnya - ini mungkin satu elemen, set elemen, dokumen HTML yang dimuatkan dalam tab semasa atau keseluruhan tetingkap penyemak imbas. Terdapat banyak jenis peristiwa yang boleh berlaku, contohnya:

• Pengguna mengklik tetikus pada elemen tertentu atau menuding kursor pada elemen tertentu.
• Pengguna menekan kekunci pada papan kekunci.
• Pengguna mengubah saiz atau menutup tetingkap penyemak imbas.
• Borang sedang diserahkan.
• Video sedang dimainkan, atau dijeda, atau selesai dimainkan.
• Ralat berlaku.

Anda boleh mengumpulkan daripada ini (dan daripada melihat rujukan Acara MDN) bahawa terdapat banyak acara yang boleh dijawab.

Setiap acara yang tersedia mempunyai pengendali acara , yang merupakan blok kod (biasanya fungsi JavaScript yang anda sebagai pengaturcara buat) yang akan dijalankan apabila acara dijalankan. Apabila blok kod sedemikian ditakrifkan untuk dijalankan sebagai tindak balas kepada penembakan acara, kami katakan kami sedang mendaftar pengendali acara . Ambil perhatian bahawa pengendali acara kadangkala dipanggil pendengar acara - mereka boleh ditukar ganti untuk tujuan kita, walaupun secara tegasnya, mereka bekerja bersama-sama. Pendengar mendengar peristiwa yang berlaku, dan pengendali ialah kod yang dijalankan sebagai tindak balas kepada peristiwa itu berlaku.

Nota: Acara web bukan sebahagian daripada bahasa JavaScript teras - ia ditakrifkan sebagai sebahagian daripada API terbina dalam penyemak imbas.

Contoh mudah

Mari lihat contoh mudah untuk menerangkan maksud kami di sini Anda telah pun melihat acara dan pengendali acara yang digunakan dalam banyak contoh dalam kursus ini, tetapi mari kita imbas semula hanya untuk mengukuhkan pengetahuan kita Dalam contoh berikut, kita mempunyai a single , yang apabila ditekan, membuat latar belakang berubah kepada warna rawak:

Tukar warna

Butang ( margin: 10px );

JavaScript kelihatan seperti itu:

Const btn = document.querySelector("butang"); fungsi rawak(nombor) ( kembalikan Math.floor(Math.random() * (nombor+1)); ) btn.onclick = function() ( const rndCol = "rgb(" + rawak(255) + "," + rawak(255) + "," + rawak(255) + ")"; document.body.style.backgroundColor = rndCol )

Dalam kod ini, kami menyimpan rujukan kepada butang di dalam pemalar yang dipanggil btn , menggunakan fungsi Document.querySelector(). Kami juga mentakrifkan fungsi yang mengembalikan nombor rawak. Bahagian ketiga kod ialah pengendali acara. Pemalar btn menunjuk kepada elemen, dan objek jenis ini mempunyai beberapa peristiwa yang boleh menyala padanya, dan oleh itu, pengendali acara tersedia. Kami sedang mendengar penembakan acara klik, dengan menetapkan sifat pengendali acara onclick kepada menyamai fungsi tanpa nama yang mengandungi kod yang menjana warna RGB rawak dan menetapkan warna latar belakang sama dengannya.

Kod ini dijalankan apabila peristiwa klik menyala pada elemen, iaitu, apabila pengguna mengklik padanya.

Contoh output adalah seperti berikut:

Ia bukan hanya laman web

Perkara lain yang patut disebut pada ketika ini ialah peristiwa bukan unik untuk JavaScript - kebanyakan bahasa pengaturcaraan mempunyai beberapa jenis model acara, dan cara model berfungsi selalunya berbeza daripada cara JavaScript. Malah, model acara dalam JavaScript untuk halaman web berbeza daripada model acara untuk JavaScript kerana ia digunakan dalam persekitaran lain.

Pengendali acara sebaris - jangan gunakan ini

Anda juga mungkin melihat corak seperti ini dalam kod anda:

Tekan saya fungsi bgChange() ( const rndCol = "rgb(" + rawak(255) + "," + rawak(255) + "," + rawak(255) + ")"; document.body.style.backgroundColor = rndCol )

Kaedah paling awal untuk mendaftarkan pengendali acara yang ditemui di Web melibatkan atribut HTML pengendali acara (atau pengendali acara sebaris ) seperti yang ditunjukkan di atas - nilai atribut secara literal ialah kod JavaScript yang anda mahu jalankan apabila acara itu berlaku. Contoh di atas menggunakan fungsi yang ditakrifkan di dalam elemen pada halaman yang sama, tetapi anda juga boleh memasukkan JavaScript terus ke dalam atribut, contohnya:

Tekan saya

Anda boleh menemui persamaan atribut HTML untuk kebanyakan sifat pengendali acara; walau bagaimanapun, anda tidak sepatutnya menggunakan ini - ia dianggap sebagai amalan buruk. Mungkin nampak mudah untuk menggunakan atribut pengendali acara jika anda hanya melakukan sesuatu dengan cepat, tetapi ia menjadi tidak terurus dan tidak berkesan dengan cepat.

Sebagai permulaan, bukanlah idea yang baik untuk mencampurkan HTML dan JavaScript anda, kerana ia menjadi sukar untuk dihuraikan - memastikan JavaScript anda berada di satu tempat adalah lebih baik; jika ia berada dalam fail berasingan, anda boleh menggunakannya pada berbilang dokumen HTML.

Walaupun dalam satu fail, pengendali acara sebaris bukanlah idea yang baik. Satu butang OK, tetapi bagaimana jika anda mempunyai 100 butang? Anda perlu menambah 100 atribut pada fail; ia akan bertukar menjadi penyelenggaraan dengan cepat. Dengan JavaScript, anda boleh dengan mudah bermimpi ngeri menambahkan fungsi pengendali acara pada semua butang pada halaman tidak kira berapa banyak terdapat, menggunakan sesuatu seperti ini:

Butang Const = document.querySelectorAll("butang"); untuk (biar i = 0; i< buttons.length; i++) { buttons[i].onclick = bgChange; } buttons.forEach(function(button) { button.onclick = bgChange; });

Nota: Mengasingkan logik pengaturcaraan anda daripada kandungan anda juga menjadikan tapak anda lebih mesra kepada enjin carian.

addEventListener() dan removeEventListener()

Jenis mekanisme acara terbaharu ditakrifkan dalam Spesifikasi Acara Tahap 2 Model Objek Dokumen (DOM), yang menyediakan pelayar dengan fungsi baharu - addEventListener() . Ini berfungsi dengan cara yang serupa dengan sifat pengendali acara, tetapi sintaksnya jelas berbeza. Kami boleh menulis semula contoh warna rawak kami untuk kelihatan seperti ini:

Const btn = document.querySelector("butang"); fungsi bgChange() ( const rndCol = "rgb(" + rawak(255) + "," + rawak(255) + "," + rawak(255) + ")"; document.body.style.backgroundColor = rndCol; ) btn.addEventListener("klik", bgChange);

Di dalam fungsi addEventListener(), kami menentukan dua parameter - nama acara yang kami ingin daftarkan pengendali ini dan kod yang terdiri daripada fungsi pengendali yang ingin kami jalankan sebagai tindak balas kepadanya. Ambil perhatian bahawa adalah sangat sesuai untuk meletakkan semua kod di dalam fungsi addEventListener(), dalam fungsi tanpa nama, seperti ini:

Btn.addEventListener("klik", function() ( var rndCol = "rgb(" + rawak(255) + "," + rawak(255) + "," + rawak(255) + ")"; document.body .style.backgroundColor = rndCol);

Mekanisme ini mempunyai beberapa kelebihan berbanding mekanisme lama yang dibincangkan sebelum ini. Sebagai permulaan, terdapat fungsi rakan sejawat, removeEventListener() , yang mengalih keluar pendengar yang ditambahkan sebelum ini. Sebagai contoh, ini akan mengalih keluar set pendengar dalam blok kod pertama dalam bahagian ini:

Btn.removeEventListener("klik", bgChange);

Ini tidak penting untuk program yang ringkas dan kecil, tetapi untuk program yang lebih besar dan lebih kompleks ia boleh meningkatkan kecekapan untuk membersihkan pengendali acara lama yang tidak digunakan Plus, sebagai contoh, ini membolehkan anda mempunyai butang yang sama melakukan tindakan yang berbeza dalam keadaan yang berbeza - apa yang anda perlu lakukan ialah menambah atau mengalih keluar pengendali acara mengikut kesesuaian.

Kedua, anda juga boleh mendaftarkan berbilang pengendali untuk pendengar yang sama. Dua pengendali berikut tidak akan digunakan kedua-duanya:

MyElement.onclick = functionA; myElement.onclick = functionB;

Baris kedua menimpa nilai onclick yang ditetapkan oleh baris pertama. Ini akan berfungsi, bagaimanapun:

MyElement.addEventListener("klik", functionA); myElement.addEventListener("klik", functionB);

Kedua-dua fungsi kini akan berjalan apabila elemen diklik.

Selain itu, terdapat beberapa ciri dan pilihan berkuasa lain yang tersedia dengan mekanisme acara ini. Ini sedikit di luar skop untuk artikel ini, tetapi jika anda ingin membacanya, lihat halaman rujukan addEventListener() dan removeEventListener().

Apakah mekanisme yang harus saya gunakan?

Daripada ketiga-tiga mekanisme tersebut, anda pastinya tidak sepatutnya menggunakan atribut pengendali acara HTML - ini sudah lapuk dan amalan buruk, seperti yang dinyatakan di atas.

Dua yang lain boleh ditukar ganti, sekurang-kurangnya untuk kegunaan mudah:

• Sifat pengendali acara mempunyai kuasa dan pilihan yang kurang, tetapi keserasian silang penyemak imbas yang lebih baik (disokong setakat Internet Explorer 8). Anda mungkin harus bermula dengan ini semasa anda belajar.
• Acara DOM Tahap 2 (addEventListener() , dsb.) adalah lebih berkuasa, tetapi juga boleh menjadi lebih kompleks dan kurang disokong dengan baik (disokong setakat Internet Explorer 9). Anda juga harus bereksperimen dengan ini, dan bertujuan untuk menggunakannya di mana mungkin.

Kelebihan utama mekanisme ketiga ialah anda boleh mengalih keluar kod pengendali acara jika perlu, menggunakan removeEventListener() , dan anda boleh menambah berbilang pendengar daripada jenis yang sama kepada elemen jika diperlukan. Sebagai contoh, anda boleh memanggil addEventListener("klik", function() ( ... )) pada elemen beberapa kali, dengan fungsi berbeza yang dinyatakan dalam hujah kedua. Ini adalah mustahil dengan sifat pengendali peristiwa kerana sebarang percubaan berikutnya untuk menetapkan sifat akan menimpa yang lebih awal, mis.:

Element.onclick = fungsi1; element.onclick = fungsi2; dan lain-lain.

Nota: Jika anda diminta untuk menyokong penyemak imbas yang lebih lama daripada Internet Explorer 8 dalam kerja anda, anda mungkin menghadapi kesukaran, kerana pelayar purba tersebut menggunakan model acara yang berbeza daripada penyemak imbas yang lebih baharu. Tetapi jangan takut, kebanyakan perpustakaan JavaScript (contohnya jQuery) mempunyai fungsi terbina dalam yang mengasingkan perbezaan merentas pelayar. Jangan terlalu risau tentang perkara ini pada peringkat ini dalam perjalanan pembelajaran anda.

Konsep acara lain

Dalam bahagian ini, kami membincangkan secara ringkas beberapa konsep lanjutan yang berkaitan dengan acara. Tidak penting untuk memahami konsep ini sepenuhnya pada ketika ini, tetapi ia mungkin dapat menerangkan beberapa corak kod yang mungkin anda akan temui dari semasa ke semasa.

Objek acara

Kadangkala di dalam fungsi pengendali acara, anda mungkin melihat parameter yang ditentukan dengan nama seperti acara , evt atau ringkasnya e . Ini dipanggil objek acara , dan ia dihantar secara automatik kepada pengendali acara untuk menyediakan ciri dan maklumat tambahan. Sebagai contoh, mari tulis semula contoh warna rawak kami sekali lagi:

Fungsi bgChange(e) ( const rndCol = "rgb(" + rawak(255) + "," + rawak(255) + "," + rawak(255) + ")"; e.target.style.backgroundColor = rndCol ; console.log(e); btn.addEventListener("klik", bgChange);

Di sini anda boleh melihat bahawa kami menyertakan objek acara, e , dalam fungsi, dan dalam fungsi menetapkan gaya warna latar belakang pada e.target - iaitu butang itu sendiri. Harta sasaran objek acara sentiasa merujuk kepada elemen yang peristiwa itu baru sahaja berlaku. Jadi dalam contoh ini, kami menetapkan warna latar belakang rawak pada butang, bukan halaman.

Nota : Anda boleh menggunakan mana-mana nama yang anda suka untuk objek acara - anda hanya perlu memilih nama yang kemudian anda boleh gunakan untuk merujuknya di dalam fungsi pengendali acara. e/evt/event paling kerap digunakan oleh pembangun kerana ia pendek dan mudah diingati. Ia sentiasa baik untuk konsisten - dengan diri sendiri, dan dengan orang lain jika boleh.

e.target amat berguna apabila anda ingin menetapkan pengendali acara yang sama pada berbilang elemen dan melakukan sesuatu kepada kesemuanya apabila peristiwa berlaku pada mereka. Anda mungkin, sebagai contoh, mempunyai set 16 jubin yang hilang apabila ia diklik. Adalah berguna untuk sentiasa boleh menetapkan perkara itu untuk hilang sebagai e.target , dan bukannya perlu memilihnya dengan cara yang lebih sukar. Dalam contoh berikut (lihat useful-eventtarget.html untuk kod sumber penuh; juga lihat ia berjalan secara langsung di sini), kami mencipta 16 elemen menggunakan JavaScript. Kami kemudian memilih kesemuanya menggunakan document.querySelectorAll() , kemudian gelung setiap satu, menambah pengendali onclick pada setiap satu yang menjadikannya supaya warna rawak digunakan pada setiap satu apabila diklik:

Const divs = document.querySelectorAll("div"); untuk (biar i = 0; i< divs.length; i++) { divs[i].onclick = function(e) { e.target.style.backgroundColor = bgChange(); } }

Outputnya adalah seperti berikut (cuba klik padanya - bersenang-senang):

Contoh tersembunyi Contoh sasaran acara berguna div ( ketinggian: 100px; lebar: 25%; terapung: kiri; ) untuk (biar i = 1; i

Dalam contoh di atas, selepas medan menerima fokus dan pengguna meneruskan untuk mengisi medan seterusnya (contohnya, menggunakan TAB atau klik biasa), elemen akan memanggil fungsi checkName, yang ditulis dalam JS.
Pengendali acara HTML standard tidak disyorkan untuk digunakan dalam pembangunan moden, terutamanya disebabkan oleh fakta bahawa fungsi itu bercampur dengan markup, yang merumitkan kerja dan penyahpepijatan kod.

2. Pengendali acara standard dalam DOM

Teknik ini memisahkan JS dan markup, tetapi mempunyai had yang sama - acara hanya boleh diberikan satu fungsi. Entri pengendali acara HTML yang setara dalam DOM ialah:

var nama pengguna = document.getElementbyId("nama pengguna"); username.onblur = checkName;

nama pengguna. onblur = checkName ;

JavaScript. Permulaan yang cepat

Pelajari asas JavaScript dengan contoh praktikal tentang cara membuat aplikasi web.

Seperti dalam contoh sebelumnya, fungsi checkName berjalan selepas elemen borang kehilangan fokus.

3. Pendengar Acara

Kaedah moden untuk menambah pengendali acara yang membolehkan anda merantai berbilang acara dan fungsi:

var nama pengguna = document.getElementbyId("nama pengguna"); username.addEventListener("blur", checkName, false);

var nama pengguna = dokumen. getElementbyId("nama pengguna"); nama pengguna. addEventListener ("kabur" , checkName , false );

Nilai boolean pada penghujung menunjukkan sama ada peristiwa itu perlu ditangkap. Biasanya ditetapkan kepada palsu. Dalam skrip mudah, acara sering ditulis sebagai fungsi tanpa nama:

var nama pengguna = document.getElementbyId("nama pengguna"); username.addEventListener("blur", function() ( // tindakan untuk mencetuskan acara ))

Tidak semua peristiwa adalah sama Adalah penting untuk memahami bahawa tidak semua peristiwa boleh diperlakukan sama. Tatal dan ubah saiz acara dicetuskan dengan kerap, itulah sebabnya anda perlu bekerja dengannya dengan berhati-hati agar tidak mengurangkan kelajuan skrip. Perkara yang sama berlaku untuk peristiwa yang kelihatan tidak berbahaya seperti input. Prestasi skrip mungkin terjejas teruk jika ia cuba untuk sentiasa bertindak balas kepada acara input yang sering dicetuskan pada peluncur julat. Tidak semua acara dijejaki Pemerhati mutasi pada masa ini tidak dapat menjejaki semua perubahan pada semua elemen pada halaman. Sebagai contoh, tiada cara untuk menjejaki perubahan dalam ketinggian elemen (apabila bekas dalam reka bentuk responsif mengecil, teks di dalamnya disusun semula dan elemen menjadi lebih panjang). Namun, terdapat cara untuk menjejaki perubahan, saya akan membincangkan perkara ini dalam artikel seterusnya. Lampirkan acara pada elemen yang betul Acara onclick digunakan pada banyak elemen, termasuk pautan. Terdapat peraturan am - tidak disyorkan untuk melampirkan kod JS pada pautan. Dengan mengklik pada pautan, pengguna harus dibawa ke kawasan lain tapak atau ke sauh. Jika anda memerlukan elemen UI yang dengannya anda boleh menukar sesuatu pada halaman yang sama, maka butang adalah sesuai untuk anda. Anda boleh menambah JavaScript pada butang dengan mudah. Jangan gunakan JavaScript apabila anda boleh melakukannya dengan CSS Berbanding dengan CSS, JavaScript adalah perlahan dan tidak boleh dipercayai. Pada asasnya, CSS harus digunakan sebagai alternatif kepada skrip kompleks di mana mungkin. Walau bagaimanapun, CSS tidak melakukan segala-galanya. Ia berfungsi dengan baik dengan :hover (ia menggantikan acara sentuh dalam banyak kes) dan juga boleh menggantikan acara klik dengan :target dalam beberapa kes. Animasi CSS dilancarkan secara automatik selepas halaman dimuatkan, dan terdapat juga keadaan CSS khas yang boleh dicetuskan untuk elemen seperti butang radio. Walau bagaimanapun, apa-apa yang lebih kompleks biasanya lebih baik diserahkan kepada JavaScript.