There are three ways to specify an event for an element in javascript

  • 2020-03-30 03:38:56
  • OfStack

In javascript, you can specify events for an element in one of three ways:
1. In HTML, use the onclick property
2. In javascript, use the onclick property
3. In javascipt, addEvenListener() method is used

Comparison of the three methods
(1) in the second and third methods, you can pass an event object to the function and read its corresponding properties, but method 1 cannot.
(2) the second and third are preferred. The first is not conducive to separating the content from the event, and the relevant content of the event object cannot be used.

Some grammatical details
(1) in the first method, onclick is case-insensitive, but in the second method, lowercase is mandatory. Because HMTL is case-insensitive, JS is case-sensitive.
(2) in the second and third methods, the name of the function is specified without double quotes, while the first, as an HTML attribute, requires double quotes.
(3) the first method requires parentheses, and the second and third methods do not.


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

The complete code is as follows:


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

In javascript, you can specify events for an element in one of three ways:
1. In HTML, use the onclick property

2. In javascript, use the onclick property
(1) notice that the function name does not have double quotes.

3. In javascipt, addEvenListener() method is used

Comparison of the three methods
(1) in the second and third methods, you can pass an event object to the function and read its corresponding properties, but method 1 cannot.

Some grammatical details
(1) in the first method, onclick is case-insensitive, but in the second method, lowercase is mandatory. Because HMTL is case-insensitive, JS is case-sensitive.
(2) in the second and third methods, the name of the function is specified without double quotes, while the first, as an HTML attribute, requires double quotes.
(3) the first method requires parentheses, and the second and third methods do not.


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

The complete code is as follows:


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

Related articles: