Languages
[Edit]
EN

JavaScript - mouse click event

2 points
Created by:
Kate_C
2854

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>
Hey šŸ‘‹
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.