Tiga cara untuk menentukan acara untuk elemen dalam kemahiran javascript

Tiga cara untuk menentukan acara untuk elemen dalam kemahiran javascript_javascript

WBOY

Lepaskan： 2016-05-16 16:40:10

asal

1138 orang telah melayarinya

Dalam JavaScript, anda boleh menentukan acara untuk elemen Terdapat tiga cara untuk menentukannya:
1. Dalam html, gunakan atribut onclick
2. Dalam javascript, gunakan atribut onclick
3. Dalam javascipt, gunakan kaedah addEvenListener()

Perbandingan tiga kaedah
(1) Dalam kaedah kedua dan ketiga, anda boleh menghantar objek acara ke fungsi dan membaca atribut yang sepadan, tetapi kaedah tidak boleh.
(2) Pilihan kedua dan ketiga adalah pilihan yang pertama tidak kondusif untuk memisahkan kandungan daripada acara, dan kandungan berkaitan objek acara tidak boleh digunakan.

Beberapa butiran sintaks
(1) Dalam kaedah pertama, onclick adalah bebas huruf besar, tetapi dalam kaedah kedua, huruf kecil mesti digunakan. Kerana HMTL tidak sensitif huruf besar-besaran, manakala JS sensitif huruf besar-besaran.
(2) Dalam kaedah kedua dan ketiga, tiada petikan berganda apabila menentukan nama fungsi, manakala kaedah pertama, sebagai atribut HTML, memerlukan petikan berganda.
(3) Kaedah pertama memerlukan kurungan, tetapi kaedah kedua dan ketiga tidak.

onclick="clickHandler()"
document.getElementById("jsOnClick").onclick = clickHandler2; 
document.getElementById("addEventListener").addEventListener("click", clickHandler2);

Salin selepas log masuk

Kod lengkap adalah seperti berikut:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Even Deom</title> 

</head> 
<body> 
<button id="htmlOnClick" onclick="clickHandler()">htmlOnClick</button> 
<button id="jsOnClick">jsOnClick</button> 
<button id="addEventListener">addEventListener</button> 

<script defer> 
function clickHandler() { 
alert("onclick attribute in html"); 
} 
function clickHandler2(e) { 
alert(e.target.innerHTML); 
} 
document.getElementById("jsOnClick").onclick = clickHandler2; 
document.getElementById("addEventListener").addEventListener("click", 
clickHandler2); 
</script> 
</body> 
</html>

Salin selepas log masuk

Dalam JavaScript, anda boleh menentukan acara untuk elemen Terdapat tiga cara untuk menentukannya:
1. Dalam html, gunakan atribut onclick

2. Dalam javascript, gunakan atribut onclick
(1) Ambil perhatian bahawa tiada petikan berganda dalam nama fungsi.

3. Dalam javascipt, gunakan kaedah addEvenListener()

Perbandingan tiga kaedah
(1) Dalam kaedah kedua dan ketiga, anda boleh menghantar objek acara ke fungsi dan membaca atribut yang sepadan, tetapi kaedah tidak boleh.

onclick="clickHandler()"
document.getElementById("jsOnClick").onclick = clickHandler2; 
document.getElementById("addEventListener").addEventListener("click", clickHandler2);

Salin selepas log masuk

Kod lengkap adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Even Deom</title>

</head>
<body>
<button id="htmlOnClick" onclick="clickHandler()">htmlOnClick</button>
<button id="jsOnClick">jsOnClick</button>
<button id="addEventListener">addEventListener</button>

<script defer>
function clickHandler() {
alert("onclick attribute in html");
}
function clickHandler2(e) {
alert(e.target.innerHTML);
}
document.getElementById("jsOnClick").onclick = clickHandler2;
document.getElementById("addEventListener").addEventListener("click",
clickHandler2);
</script>
</body>
</html>

Salin selepas log masuk