Apakah kaedah pengendalian acara dalam javascript-tutorial js-php.cn

Apakah kaedah pengendalian acara dalam javascript

青灯夜游

Lepaskan： 2021-10-08 15:30:31

asal

3815 orang telah melayarinya

Kaedah pemprosesan acara dalam JavaScript ialah: 1. Tambahkan acara dalam atribut acara teg, sintaksnya ialah ""; Gunakan sumber acara Atribut acara terikat pada fungsi pemprosesan acara, sintaksnya ialah "objek sumber acara. pada nama acara = fungsi pemprosesan acara".

Apakah kaedah pengendalian acara dalam javascript

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

Kaedah pengendalian acara Javascript

Kaedah 1. Tambahkan acara dalam atribut acara teg

Pengendali ikatan menggunakan atribut acara teg HTML. Perlu diingat bahawa 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:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
     function printName(){
          var name = "张三";
          alert(name);
     }
</script>
</head>
<body>
     <input type="button" onClick="printName()" value="事件绑定测试"/>
</body>
</html>

Salin selepas log masuk

Apakah kaedah pengendalian acara dalam javascript

Kaedah 2, gunakan atribut acara sumber acara untuk mengikat pengendali

Salah satu cara untuk memisahkan HTML dan JS ialah mengikat fungsi pengendali acara dengan menggunakan atribut acara sumber acara Format pengikatan adalah seperti berikut:

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

Salin selepas log masuk

obj in format ialah objek sumber acara. Program acara terikat biasanya merupakan pernyataan definisi bagi fungsi tanpa nama, atau nama fungsi.

Contoh mengikat pengendali pada atribut acara sumber acara:

oBtn.onclick = function(){//oBtn为事件源对象，它的单击事件绑定了一个匿名函数定义
      alert(&#39;hi&#39;)
};

Salin selepas log masuk

Contoh: Mengikat fungsi pengendali acara menggunakan atribut acara sumber acara.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<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>

Salin selepas log masuk

[Pembelajaran yang disyorkan: tutorial lanjutan javascript]

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