Languages
[Edit]
EN

JavaScript - mouse click event

2 points
Created by:
Kate_C
19790

In this post we can find different ways of how to handle click event in pure JavaScript.

Quick overview:

// 1.
// <button onclick="onButtonClick(this)">Click me!</button>

// 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 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>
Native Advertising
50 000 ad impressions - 449$
🚀
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

❤️💻 🙂

Join