Three ways to specify an event for an element in javascript

Three ways to specify an event for an element in javascript_javascript skills

WBOY

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

Original

1127 people have browsed it

In JavaScript, you can specify an event for an element. There are three ways to specify it:
1. In html, use 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, you can pass an event object to the function and read its corresponding attributes, but method one cannot.
(2) The second and third options are preferred. The first one is not conducive to separating the content from the event, and the related content of the event object cannot be used.

Some syntax details
(1) In the first method, onclick is case-independent, but in the second method, lowercase 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, as an HTML attribute, requires double quotes.
(3) The first method requires parentheses, but the second and third methods do not.

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

Copy after login

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>

Copy after login

In JavaScript, you can specify an event for an element. There are three ways to specify it:
1. In html, use onclick attribute

2. In javascript, use the onclick attribute
(1) Note that there are no double quotes in the function name.

3. In javascipt, use the addEvenListener() method

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

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

Copy after login

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>

Copy after login