In JavaScript, you can specify events for an element, and there are three ways to specify them:
1. In html, use the onclick attribute
2. In javascript, use the onclick attribute
3. In javascipt, use the addEvenListener() method
Comparison of three methods
(1) In the second and third methods, an event object can be passed to the function and its corresponding properties can be read, but method 1 cannot be used.
(2) The second and third types are preferred. The first type is not conducive to separating the content from events, and it is also impossible to use the relevant content of the event object.
Some syntax details
(1) In the first method, onclick case is irrelevant, but in the second method, lower case must be used. Because HMTL is not case sensitive, while JS is case sensitive.
(2) In the second and third methods, there are no double quotes when specifying the function name, while the first method is an HTML attribute and requires double quotes.
(3) The first method requires brackets, while the second and third methods do not.
onclick="clickHandler()"
("jsOnClick").onclick = clickHandler2;
("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 onclick="clickHandler()">htmlOnClick</button>
<button >jsOnClick</button>
<button >addEventListener</button>
<script defer>
function clickHandler() {
alert("onclick attribute in html");
}
function clickHandler2(e) {
alert();
}
("jsOnClick").onclick = clickHandler2;
("addEventListener").addEventListener("click",
clickHandler2);
</script>
</body>
</html>
In JavaScript, you can specify events for an element, and there are three ways to specify them:
1. In html, use the onclick attribute
2. In javascript, use the onclick attribute
(1) Note that the function name does not have double quotes.
3. In javascipt, use the addEvenListener() method
Comparison of three methods
(1) In the second and third methods, an event object can be passed to the function and its corresponding properties can be read, but method 1 cannot be used.
Some syntax details
(1) In the first method, onclick case is irrelevant, but in the second method, lower case must be used. Because HMTL is not case sensitive, while JS is case sensitive.
(2) In the second and third methods, there are no double quotes when specifying the function name, while the first method is an HTML attribute and requires double quotes.
(3) The first method requires brackets, while the second and third methods do not.
onclick="clickHandler()"
("jsOnClick").onclick = clickHandler2;
("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 onclick="clickHandler()">htmlOnClick</button>
<button >jsOnClick</button>
<button >addEventListener</button>
<script defer>
function clickHandler() {
alert("onclick attribute in html");
}
function clickHandler2(e) {
alert();
}
("jsOnClick").onclick = clickHandler2;
("addEventListener").addEventListener("click",
clickHandler2);
</script>
</body>
</html>