Apakah kaedah pengikatan acara javascript?-tutorial js-php.cn

Apakah kaedah pengikatan acara javascript?

青灯夜游

Lepaskan： 2023-01-07 11:47:40

asal

6010 orang telah melayarinya

Kaedah pengikatan: 1. Gunakan pernyataan "object.on event name = function(){code}" untuk mengikat; 2. Gunakan "event source.addEventListener(event name, event processing name function, sama ada untuk capture );" pernyataan mengikat; 3. Gunakan atribut "onclick" dalam teg HTML untuk mengikat acara.

Apakah kaedah pengikatan acara javascript?

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

1. Gunakan pengendali pengikatan atribut acara sumber acara

Salah satu cara untuk memisahkan HTML dan JS adalah dengan menggunakan fungsi pengikatan atribut acara sumber acara, format pengikatan adalah seperti berikut:

obj.on事件名 = 事件处理函数

Salin selepas log masuk

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(&#39;hi&#39;)
};

Salin selepas log masuk

2 Gunakan addEventListener() untuk mengikat pengendali

addEventListener( ) ialah. kaedah dalam model acara standard dan sah dalam semua pelayar standard. Format penggunaan addEvent Lister() untuk mengikat pengendali acara adalah seperti berikut:

事件源.addEventListener(事件名称,事件处理函数名,是否捕获);

Salin selepas log masuk

Parameter "nama acara" ialah nama acara tanpa "on" parameter "sama ada untuk menangkap" ialah a Nilai Boolean, Nilai lalai adalah palsu Apabila palsu, acara menggelegak dicapai, dan apabila benar, tangkapan peristiwa dicapai.

Dengan memanggil addEventListener() beberapa kali, anda boleh mengikat berbilang pengendali acara kepada jenis acara yang sama bagi objek sumber acara. Apabila peristiwa berlaku pada objek, semua fungsi pengendalian peristiwa yang terikat pada acara akan dipanggil dan dilaksanakan secara berurutan mengikut susunan di mana ia terikat. Di samping itu, perlu diingatkan bahawa ini dalam fungsi pengendalian acara yang terikat oleh addEventListener() menghala ke sumber acara.

addEventListener() contoh pengendali mengikat:

document.addEventListener(&#39;click&#39;,fn1,false);//click事件绑定fn1函数实现事件冒泡
document.addEventListener(&#39;click&#39;,fn2,true);//click事件绑定fn2函数实现事件捕获

Salin selepas log masuk

3 Gunakan pengendali pengikatan atribut acara bagi teg HTML

memerlukan perhatian Lebih-lebih lagi, apabila menggunakan atribut acara teg HTML untuk mengikat pengendali 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: Ikat pengendali acara menggunakan atribut acara teg HTML.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用HTML标签的事件属性绑定事件处理程序</title>
</head>
<body>
     <input type="button" onclick="var name=&#39;张三&#39;;alert(name);" value="事件绑定测试"/>
</body>
</html>

Salin selepas log masuk

Butang dalam kod di atas ialah objek sasaran acara klik, yang mengikat dua kod skrip melalui atribut acara pada klik pada label untuk pemprosesan acara. Selepas kod di atas dijalankan dalam penyemak imbas Chrome, apabila pengguna mengklik butang, kotak dialog amaran akan muncul.

[Pembelajaran yang disyorkan: Tutorial JavaScript Lanjutan]

Atas ialah kandungan terperinci Apakah kaedah pengikatan acara javascript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!