JavaScript

How to add an Event Handler to an Element in JavaScript

The event handler, in general, is that piece of code that controls events. It dictates the software about the actions it should take when an event occurs. JavaScript event handlers invoke a particular piece of code when a specific event occurs to an HTML element. You can add one or more than one event handler to an HTML element that will operate on a relevant piece of code on the basis of the kind of event that occurs to the HTML element. This write-up discusses in-depth ways of adding event handlers to an HTML element in JavaScript.

How to add an Event Handler to an Element in JavaScript

JavaScript provides addEventListener() that allows you to add an event handler to an HTML element. This method binds an event to an HTML element, moreover, it adds an event handler to a particular HTML element without overwriting any event handler that already exists on that element.

Syntax

element.addEventListener(eventtype,eventListener);

Example

Suppose you want to add an event handler that binds click event to an element.

<!DOCTYPE html>
<html>
<body>

 <button id="button"><strong>Click me</strong></button>
 <p id="tutorial"></p>

<script>
  document.getElementById("button").addEventListener("click", functionName);

function functionName() {
  document.getElementById("tutorial").innerHTML = "YOU CLICKED ME!";
}
</script>

</body>
</html>

In the above example, we are creating a button using the following piece of code.

<button id="button"><strong>Click me</strong></button>

Using the addEventListener() method, we are attaching a click event to the button.

  document.getElementById("button").addEventListener("click", functionName);
function functionName() {
  document.getElementById("tutorial").innerHTML = "YOU CLICKED ME!";

When you click the button, a note will be appear telling you that you just clicked the button. We have shown the output below.

More About Event Handlers!

1. It is possible to add various event handlers or various event handlers of the same kind to a particular element.

Example

Following is an example of adding two keypress events to an input field using addEventListener() method.

<!DOCTYPE html>
<html>
<body>

<input id="myInput">

<script>
var x = document.getElementById("myInput");
x.addEventListener("keypress", firstFunction);
x.addEventListener("keypress", secondFunction);

function firstFunction() {
  alert ("First keypress event happened!");
}

function secondFunction() {
  alert ("Second keypress event happened!");
}
</script>

</body>
</html>

In the above example, the following piece of code adds two keypress events to an input field.

function firstFunction() {
  alert ("First keypress event happened!");
}

function secondFunction() {
  alert ("Second keypress event happened!");
}

When you press a keyboard key while inside the input field, the first keypress event will occur.

After you click OK in the dialogue box, second keypress will happen.

2. Event handlers can be added to DOM objects as well.

3. Event handlers dedicate the behaviour of events on how these react on bubbling.

4. To increase the readability, JavaScript splits up from HTML markup when addEventListener() method is used.

5. While using the addEventListener() method, you can also use event bubbling or event capturing but it is totally optional.

In event bubbling the event of inner most element is operated first and the event of outer most element later. However, in event capturing the event of the outer most element is operated first and the event of inner most element later.

Syntax for using event bubbling and event capturing is as follows.
element.addEventListener(event, function, useCapture);

Note: In the above syntax, by default the parameter value is false that means event bubbling will occur but if you pass the parameter value as true then event capturing will happen.

Example

Following is an example of bubbling propagation.

<!DOCTYPE html>
<html>
<body>

<p id="para1">This is bubbling propagation.<br>
<br><button id="button1">Click me!</button>
</p>

<script>
document.getElementById("button1").addEventListener("click", function() {
  alert("You clicked the button!");
}, false);

document.getElementById("para1").addEventListener("click", function() {
  alert("You clicked the paragraph!");
}, false);
</script>

</body>
</html>

In the above example, we are creating a <p> element as a parent element and <button> element as child element.

<p id="para1">This is bubbling propagation.<br>
<br><button id="button1">Click me!</button>
</p>

Using then used to add a click event using addEventListener() method along with bubbling propagation.

document.getElementById("button1").addEventListener("click", function() {
  alert("You clicked the button!");
}, false);

document.getElementById("para1").addEventListener("click", function() {
  alert("You clicked the paragraph!");
}, false);

When you execute this program, and click the button first then bubbling propagation will operate the click event on the button (inner-most element) first and the paragraph (outer-most element) later. Here is the output.

Now when you will click OK, bubbling propagation will perform click event on the paragraph.

Using the same example, if you pass the parameter value as true then capturing propagation will happen.

<!DOCTYPE html>
<html>
<body>

<p id="para1">This is bubbling propagation.<br>
<br><button id="button1">Click me!</button>
</p>

<script>
document.getElementById("button1").addEventListener("click", function() {
  alert("You clicked the button!");
}, true);

document.getElementById("para1").addEventListener("click", function() {
  alert("You clicked the paragraph!");
}, true);
</script>

</body>
</html>

If you click the child element (button) first then capturing propagation will operate click event on paragraph (outer-most element) first and button (inner-most element) later. We have shown the output below.

After clicking OK, click event will happen on the <button> element.

6. It is also possible to remove an event handler using the removeEventListener() method.

Conclusion

JavaScript provides addEventListener() method that allows you to bind an event handler to an element. You can attach various event handlers of the same kind to a particular element, moreover, besides HTML elements you can also add event handlers to DOM objects. You can also add bubbling propagation and capturing propagation using addEventListener() method. This write-up discusses in detail, approaches of adding event handlers to an element using JavaScript along with suitable examples.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.