hujung hadapan web
tutorial js
Bagaimana untuk menambah acara pada elemen? Tiga cara untuk menghuraikan peristiwa mengikat JS
Bagaimana untuk menambah acara pada elemen? Tiga cara untuk menghuraikan peristiwa mengikat JS
Javascript, sebagai bahasa skrip, boleh mengikat acara pada elemen pada halaman, supaya apabila peristiwa tertentu berlaku, pengendali acara yang sepadan boleh dipanggil secara automatik untuk mengendalikan acara. Jadi bagaimana untuk menambah acara pada elemen? Artikel berikut akan memperkenalkan kepada anda tiga cara untuk mengikat acara dalam JS Saya harap ia akan membantu anda!
Untuk membolehkan penyemak imbas memanggil secara automatik pengendali acara yang sepadan untuk mengendalikan acara apabila peristiwa itu berlaku, adalah perlu untuk mengikat pengendali acara kepada sumber acara ( pengendali acara mengikat juga Hubungi pengendali acara berdaftar).
Terdapat 3 cara untuk mengikat pengendali acara:
Dalam teg HTML, gunakan atribut acara (seperti onclick) untuk mengikat pengendali acara. Kaedah ini menetapkan nilai atribut acara teg kepada pengendali acara. Kaedah ini tidak disyorkan sekarang HTML dan js digabungkan, yang tidak sesuai untuk penyelenggaraan.
Dalam js, gunakan atribut acara sumber acara (seperti onclick) untuk mengikat fungsi pengendali acara. Kaedah ini menetapkan nilai atribut acara objek sumber acara kepada fungsi pemprosesan acara.
Dalam js, gunakan kaedah
addEventListener()untuk mengikat acara dan fungsi pengendalian acara (versi sebelum IE9 menggunakan kaedah attach Event()).
1 Gunakan pengendali pengikatan atribut acara bagi tag HTML
Perlu diambil perhatian bahawa menggunakan tag HTML Apabila. mengikat pengendali acara kepada atribut acara, kod skrip dalam atribut acara tidak boleh mengandungi pengisytiharan fungsi, tetapi boleh menjadi panggilan fungsi atau satu siri kod skrip yang dipisahkan oleh koma bertitik.
【Contoh 1】Gunakan atribut acara teg HTML untuk mengikat pengendali acara.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用HTML标签的事件属性绑定事件处理程序</title>
</head>
<body>
<input type="button" onclick="var name='PHP中文网';alert(name);" value="事件绑定测试"/>
</body>
</html>Butang dalam kod di atas ialah objek sasaran acara klik, yang mengikat dua kod skrip untuk pemprosesan acara melalui atribut acara pada klik label. Selepas kod di atas dijalankan dalam penyemak imbas Chrome, apabila pengguna mengklik butang, kotak dialog amaran akan muncul dan hasilnya adalah seperti yang ditunjukkan dalam rajah di bawah.
Apabila pengendali acara melibatkan lebih daripada 2 baris kod, jika anda mengikat pengendali acara seperti Contoh 1, program akan menjadi sangat mudah dibaca. Anda boleh melakukan ini dengan mentakrifkan pengendali acara sebagai fungsi dan memanggil fungsi dalam sifat acara.
[Contoh 2] Atribut acara teg HTML ialah panggilan fungsi.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML标签的事件属性为函数调用</title>
<script>
function printName(){
var name = "PHP中文网";
alert(name);
}
</script>
</head>
<body>
<input type="button" onClick="printName()" value="事件绑定测试"/>
</body>
</html>Hasil pelaksanaan kod di atas adalah sama seperti Contoh 1. Seperti yang anda boleh lihat daripada dua contoh di atas, atribut acara teg mencampurkan kod skrip JS dan teg HTML, melanggar prinsip standard web bahawa JS dan HTML harus dipisahkan. Oleh itu, adalah tidak baik untuk menggunakan atribut acara tag HTML untuk mengikat pengendali acara, dan harus dielakkan dalam aplikasi praktikal.
2. Pengendali ikatan menggunakan atribut acara sumber acara
Salah satu cara untuk memisahkan HTML dan JS adalah dengan menggunakan peristiwa Atribut acara daripada sumber terikat kepada fungsi pemprosesan acara Format pengikatan adalah seperti berikut:
obj.on事件名 = 事件处理函数
obj dalam format ialah objek sumber acara. Program acara terikat biasanya merupakan pernyataan definisi bagi fungsi tanpa nama, atau nama fungsi.
Contoh pengendali pengikatan atribut acara sumber acara:
oBtn.onclick = function(){//oBtn为事件源对象，它的单击事件绑定了一个匿名函数定义
alert('hi')
};[Contoh 3] Ikat fungsi pengendali acara menggunakan atribut acara sumber acara.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用事件源的事件属性绑定事件处理函数</title>
<script>
window.onload = function(){//窗口加载事件绑定了一个匿名函数
//定义一个名为fn的函数
function fn(){
alert('hello');
}
//获取事件源对象
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
//绑定一个匿名函数
oBtn1.onclick = function(){
alert("hi");
}
//绑定一个函数名
oBtn2.onclick = fn;
};
</script>
</head>
<body>
<input type="button" id="btn1" value="绑定一个匿名函数">
<input type="button" id="btn2" value="绑定一个函数名">
</body>
</html>Kod JS di atas mengendalikan tiga peristiwa: tetingkap dokumen memuatkan acara memuatkan dan dua butang klik peristiwa klik. Pemprosesan ketiga-tiga peristiwa ini dicapai dengan mengikat fungsi pemprosesan acara menggunakan atribut acara sumber acara Acara muat dan acara klik butang pertama terikat kepada fungsi tanpa nama, manakala acara klik butang kedua terikat. kepada fungsi tanpa nama Apa yang ditentukan ialah nama fungsi.
Adalah penting untuk ambil perhatian bahawa anda tidak boleh menambah "()" selepas nama fungsi yang diikat oleh oBtn2, jika tidak, fungsi terikat akan menjadi panggilan fungsi, yang akan berlaku secara automatik apabila enjin JS melaksanakan baris kod ini . Panggilan dilaksanakan, tetapi ia tidak akan dilaksanakan apabila acara dicetuskan.
Fungsi acara pemuatan tetingkap akan diproses selepas semua elemen dokumen dimuatkan dan acara klik akan dicetuskan apabila setiap butang diklik. Selepas mengklik butang pertama dan kedua, dua kotak dialog amaran yang menunjukkan "hai" dan "hello" akan muncul masing-masing.
3 Gunakan addEventListener() untuk mengikat pengendali
<. 🎜>Menggunakan atribut acara objek sumber acara untuk mengikat pengendali acara adalah mudah, tetapi ia mempunyai kekurangan: acara hanya boleh terikat kepada satu pengendali, dan pengendali peristiwa yang terikat kemudian akan menimpa fungsi pemprosesan yang terikat sebelumnya. Dalam aplikasi sebenar, peristiwa daripada sumber peristiwa mungkin diproses oleh pelbagai fungsi.当一个事件源需要使用多个函数来处理时，可以通过事件源调用 addEventListener()（针对标准浏览器）来绑定事件处理函数以实现此需求。一个事件源通过方法绑定多个事件函数的实现方式是：对事件源对象调用多次 addEventListener()，其中每次的调用只绑定一个事件处理函数。
addEventListener() 是标准事件模型中的一个方法，对所有标准浏览器都有效。使用 addEvent Liste ner() 绑定事件处理程序的格式如下：
事件源.addEventListener(事件名称,事件处理函数名,是否捕获);
参数“事件名称”是一个不带“on”的事件名；参数“是否捕获”是一个布尔值，默认值为 false，取 false 时实现事件冒泡，取 true 时实现事件捕获。
通过多次调用 addEventListener() 可以为一个事件源对象的同一个事件类型绑定多个事件处理函数。当对象发生事件时，所有该事件绑定的事件处理函数就会按照绑定的顺序依次调用执行。另外，需要注意的是，addEventListener() 绑定的事件处理函数中的 this 指向事件源。
addEventListener() 绑定处理程序示例：
document.addEventListener('click',fn1,false);//click事件绑定fn1函数实现事件冒泡 document.addEventListener('click',fn2,true);//click事件绑定fn2函数实现事件捕获
【例 4】使用 addEventListener() 绑定事件函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用addEventListener()/attachEvent()绑定事件函数</title>
<script>
function fn1(){
alert("fn1()");
}
function fn2(){
alert("fn2()");
}
function bindTest(){
document.addEventListener('click',fn1,false);//首先绑定fn1函数
document.addEventListener('click',fn2,false);
}
bindTest();//调用函数
</script>
</head>
<body>
</body>
</html>上述代码在浏览器中运行后，当单击文档窗口时，会依次弹出显示“fn1()”和“fn2()”的警告对话框。
【推荐学习：javascript高级教程】
Atas ialah kandungan terperinci Bagaimana untuk menambah acara pada elemen? Tiga cara untuk menghuraikan peristiwa mengikat JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1382
52
Bagaimana untuk melaksanakan sistem pengecaman pertuturan dalam talian menggunakan WebSocket dan JavaScript
Dec 17, 2023 pm 02:54 PM
Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian Pengenalan: Dengan perkembangan teknologi yang berterusan, teknologi pengecaman pertuturan telah menjadi bahagian penting dalam bidang kecerdasan buatan. Sistem pengecaman pertuturan dalam talian berdasarkan WebSocket dan JavaScript mempunyai ciri kependaman rendah, masa nyata dan platform merentas, dan telah menjadi penyelesaian yang digunakan secara meluas. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian.
WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata
Dec 17, 2023 pm 05:30 PM
WebSocket dan JavaScript: Teknologi utama untuk merealisasikan sistem pemantauan masa nyata Pengenalan: Dengan perkembangan pesat teknologi Internet, sistem pemantauan masa nyata telah digunakan secara meluas dalam pelbagai bidang. Salah satu teknologi utama untuk mencapai pemantauan masa nyata ialah gabungan WebSocket dan JavaScript. Artikel ini akan memperkenalkan aplikasi WebSocket dan JavaScript dalam sistem pemantauan masa nyata, memberikan contoh kod dan menerangkan prinsip pelaksanaannya secara terperinci. 1. Teknologi WebSocket
Cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata
Dec 17, 2023 pm 12:09 PM
Pengenalan kepada cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata: Dengan populariti Internet dan kemajuan teknologi, semakin banyak restoran telah mula menyediakan perkhidmatan pesanan dalam talian. Untuk melaksanakan sistem pesanan dalam talian masa nyata, kami boleh menggunakan teknologi JavaScript dan WebSocket. WebSocket ialah protokol komunikasi dupleks penuh berdasarkan protokol TCP, yang boleh merealisasikan komunikasi dua hala masa nyata antara pelanggan dan pelayan. Dalam sistem pesanan dalam talian masa nyata, apabila pengguna memilih hidangan dan membuat pesanan
Bagaimana untuk melaksanakan sistem tempahan dalam talian menggunakan WebSocket dan JavaScript
Dec 17, 2023 am 09:39 AM
Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian Dalam era digital hari ini, semakin banyak perniagaan dan perkhidmatan perlu menyediakan fungsi tempahan dalam talian. Adalah penting untuk melaksanakan sistem tempahan dalam talian yang cekap dan masa nyata. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian dan memberikan contoh kod khusus. 1. Apakah itu WebSocket? WebSocket ialah kaedah dupleks penuh pada sambungan TCP tunggal.
JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap
Dec 17, 2023 pm 05:13 PM
JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap Pengenalan: Hari ini, ketepatan ramalan cuaca sangat penting kepada kehidupan harian dan membuat keputusan. Apabila teknologi berkembang, kami boleh menyediakan ramalan cuaca yang lebih tepat dan boleh dipercayai dengan mendapatkan data cuaca dalam masa nyata. Dalam artikel ini, kita akan mempelajari cara menggunakan teknologi JavaScript dan WebSocket untuk membina sistem ramalan cuaca masa nyata yang cekap. Artikel ini akan menunjukkan proses pelaksanaan melalui contoh kod tertentu. Kami
Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP
Jan 05, 2024 pm 06:08 PM
Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest
Bagaimana untuk menggunakan insertBefore dalam javascript
Nov 24, 2023 am 11:56 AM
Penggunaan: Dalam JavaScript, kaedah insertBefore() digunakan untuk memasukkan nod baharu dalam pepohon DOM. Kaedah ini memerlukan dua parameter: nod baharu untuk dimasukkan dan nod rujukan (iaitu nod di mana nod baharu akan dimasukkan).
JavaScript dan WebSocket: Membina sistem pemprosesan imej masa nyata yang cekap
Dec 17, 2023 am 08:41 AM
JavaScript ialah bahasa pengaturcaraan yang digunakan secara meluas dalam pembangunan web, manakala WebSocket ialah protokol rangkaian yang digunakan untuk komunikasi masa nyata. Menggabungkan fungsi berkuasa kedua-duanya, kami boleh mencipta sistem pemprosesan imej masa nyata yang cekap. Artikel ini akan memperkenalkan cara untuk melaksanakan sistem ini menggunakan JavaScript dan WebSocket, dan memberikan contoh kod khusus. Pertama, kita perlu menjelaskan keperluan dan matlamat sistem pemprosesan imej masa nyata. Katakan kita mempunyai peranti kamera yang boleh mengumpul data imej masa nyata
