Rumah >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

青灯夜游ke hadapan: 2022-08-04 19:27:104416semak imbas

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=&#39;PHP中文网&#39;;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.

Bagaimana untuk menambah acara pada elemen? Tiga cara untuk menghuraikan peristiwa mengikat JS

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

[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(&#39;hello&#39;);
          }
          //获取事件源对象
          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.

Bagaimana untuk menambah acara pada elemen? Tiga cara untuk menghuraikan peristiwa mengikat JS

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(&#39;click&#39;,fn1,false);//click事件绑定fn1函数实现事件冒泡
document.addEventListener(&#39;click&#39;,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(&#39;click&#39;,fn1,false);//首先绑定fn1函数   
         document.addEventListener(&#39;click&#39;,fn2,false);   
     }
     bindTest();//调用函数
</script>
</head>
<body>
</body>
</html>

上述代码在浏览器中运行后，当单击文档窗口时，会依次弹出显示“fn1()”和“fn2()”的警告对话框。

Bagaimana untuk menambah acara pada elemen? Tiga cara untuk menghuraikan peristiwa mengikat JS

【推荐学习：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!

JavaScript chrome html Event JS 对象事件 this

Kenyataan：

Artikel ini dikembalikan pada:biancheng.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：[Ringkasan] Kaedah operasi biasa tatasusunan JS untuk membantu anda meningkatkan kecekapan pembangunan!Artikel seterusnya：[Ringkasan] Kaedah operasi biasa tatasusunan JS untuk membantu anda meningkatkan kecekapan pembangunan!

Artikel berkaitan

Lihat lagi