Events in JavaScript

What is an Event ?

The event is an action, that something happens to HTML elements. For Example When user click on the button, click event triggered. We can execute JavaScript code or function when an event triggered.

In the following example, the click event is triggered by onclick attribute.

<input type='button' onclick="document.write('Button Clicked')" value='Click'>

In the example above, onclick attribute execute the javascript code when button clicks.

We can trigger an event on an element with one of the following methods.

• Trigger by elements attribute
• Using DOM object property
• Using addEventListener() method

<input type='button' onclick="func()" value='Click'>
<script>
  function func(){
    document.write("Button Clicked");
  }
</script>

<input type='button' id='btn' value='Click'>
<script>
  document.querySelector("#btn").onclick=function(){
    document.write("Button Clicked");
  }
</script>

element.addEventListener(event,function);

<input type='button' id='btn' value='Click'>
<script>
  document.querySelector("#btn").addEventListener('click',onclick=function(){
    document.write("Button Clicked");
  });
</script>