Top community members
All Wiki Articles Create Wiki Article

Welcome to Dirask IT community! ā¤ šŸ’»
We are community of people that helps each other.

If you think you have some skills to help others

help someone and become a part of our community - List Q & A

JavaScript - mouse click event

0 contributions
2 points

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>
0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey šŸ‘‹
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more