Home >Web Front-end >JS Tutorial >Three ways to specify an event for an element in javascript_javascript skills

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

WBOYOriginal: 2016-05-16 16:40:101139browse

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);

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 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);

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>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：When the web page is running, the prompt object does not support the abigimage attribute or method_javascript tipsNext article：When the web page is running, the prompt object does not support the abigimage attribute or method_javascript tips

See more

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

Related articles