Javascript Events

We can attach event listeners by three ways :

• 1As an HTML attribute
  • - In this approach , we attach event listener as a attribute in opening tag.
  • - Syntax : <tag onevent_name='function_reference()'>
  • - We have to prefix 'on' before the event name.
  • - When we pass a function , we have to function_reference and parenthesis.

  - Example : When user clicks on div , it's color should change to red.

  Copy code

  Copy code

  1<div onclick="handleButtonClick()">Hello Honney Bunny🐰</div>
  2
  3<script>
  4       
  5    function handleButtonClick() {
  6      let div = document.querySelector('div');
  7      div.style.backgroundColor='red';
  8    }
  9
  10</script>
  11

• 2As a JS Property
  • - In this approach , first we need the reference of element then we attach listener to it (the way we add property to an object).
  • - Syntax : element.onevent_name = function_reference;
  • - We have to prefix 'on' before the event name.
  • - At the time of attaching listener to element , we just need to pass function reference to it.(listener will automatically call that function).

  - Example : When user clicks on div , it's color should change to red.

  Copy code

  Copy code

  1<div>Hello Honney Bunny🐰</div>
  2
  3<script>
  4
  5    let div = document.querySelector('div');
  6    div.onclick = handleButtonClick;
  7
  8    function handleButtonClick() {
  9      div.style.backgroundColor='red';
  10    }
  11
  12</script>
  13

• 3Using addEventListener Method
  • - In this approach , first we need the reference of element then we attach listener to it (the way we add property to an object).
  • - Syntax : element.addEventListener(event_name,function_reference)
  • - First argument will be the event name (no need prefix 'on') and pass function reference.

  - Example : When user clicks on div , it's color should change to red.

  Copy code

  Copy code

  1<div>Hello Honney Bunny🐰</div>
  2
  3<script>
  4
  5    let div = document.querySelector('div');
  6    div.addEventListener('click',handleButtonClick)
  7
  8    function handleButtonClick() {
  9      div.style.backgroundColor='red';
  10    }
  11
  12</script>
  13