Rumah >hujung hadapan web >tutorial js >Apakah kaedah pengendalian acara dalam javascript
Apakah kaedah pengendalian acara dalam javascript
- 青灯夜游asal
- 2021-10-08 15:30:313889semak imbas
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".
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>
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事件名 = 事件处理函数
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('hi')
};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('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>[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!