JavaScript - mouse click event
In this post, we can find different ways of how to handle click event in pure JavaScript.
Quick overview:
// in HTML:
// 1.
// <button onclick="onButtonClick(this)">Click me!</button>
// in JavaScript:
// 2.
button.setAttribute('onclick', 'onButtonClick()');
// 3.
button.onclick = function() { /* code here... */ };
// 4. - this approach is strongly recommended
button.addEventListener('click', function() { /* code here... */ };
More detailed method description is placed in the below.
1. onclick attribute example
This approach uses onclick element attrbute to assign event function. It is not recommended to assign event this way because of possible double assign mistakes from source code level later - second event function removes first one.
1.1. HTML level attribute
We can access onclick element attribute from HTML level.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<button onclick="onButtonClick(this)">Click me!</button>
<script>
function onButtonClick(button) {
button.innerText = 'Button clicked!';
}
</script>
</body>
</html>
1.2. JavaScript level attribute
We can access onclick element attribute from JavaScript level.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<button id="button">Click me!</button>
<script>
var button = document.querySelector('#button');
function onButtonClick() {
button.innerText = 'Button clicked!';
}
button.setAttribute('onclick', 'onButtonClick()');
</script>
</body>
</html>
2. onclick property example
This approach uses onclick property to assign event function. It allows to assign only one logic for element event. It is not recommended to assign event this way because of possible double assign mistakes in code - second event function removes first one.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<button id="button">Click me!</button>
<script>
var button = document.querySelector('#button');
button.onclick = function() {
button.innerText = 'Button clicked!';
};
</script>
</body>
</html>
3. addEventListener method example
This approach is strongly recommended because it is possible to assign many onclick events to one element.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<button id="button">Click me!</button>
<script>
var button = document.querySelector('#button');
button.addEventListener('click', function() {
button.innerText = 'Button clicked!';
});
</script>
</body>
</html>