JavaScript Events

What are events in JavaScript?

  1. 1. Actions performed by user on browser are refered as events.
  2. 2. Whenever event occurs browser creats an object which contains all information about the event and object on which event occured.
  3. 3. Example: Like if user click on <h1> tag, browser automatically creates an object which have information about h1 tag and type of event occured (here, type is 'click').

What is Event object?

  1. 1. Event object is a object created by the browser when user perform some action, which holds all information about type of event occured and the element on which the event occurred.
  2. 2. Event object is passed to respective event handler, every time event occured.
  3. 3. So, we can access event object in callback function.

What are Event listeners?

  1. 1. Event listeners are functions that wait for a specific event to occur and then execute js code (callbacks) assigned to it.
  2. 2. By writting logic in callback, we can control what to do when event occurs like change text color, hide or show, etc.

How to attach Event listeners?

  1. 1. We can attach event listeners by three ways:

    • 1. As 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.

        <div onclick="handleButtonClick()">Hello Honney Bunny🐰</div>

<script>
    function handleButtonClick() {
      let div = document.querySelector('div');
      div.style.backgroundColor='red';
    }
</script>
    • 2. As 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.

        <div>Hello Honney Bunny🐰</div>

<script>
    let div = document.querySelector('div');
    div.onclick = handleButtonClick;

    function handleButtonClick() {
      div.style.backgroundColor='red';
    }
</script>
    • 3. Using 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.

        <div>Hello Honney Bunny🐰</div>

<script>
    let div = document.querySelector('div');
    div.addEventListener('click',handleButtonClick)

    function handleButtonClick() {
      div.style.backgroundColor='red';
    }
</script>

Type of events

  1. 1. Keyboard Events

    Event Name Info
    keydown Triggered when a key is pressed down.
    keyup Triggered when a key is released.
    keypress Triggered when a key is pressed and released.

  2. 2. Mouse Events

    Event Name Info
    click Triggered when the mouse is clicked.
    dblclick Triggered when the mouse is double-clicked.
    mousedown Triggered when a mouse button is pressed down.
    mouseup Triggered when a mouse button is released.
    mousemove Triggered when the mouse pointer moves.

  3. 3. Form Events

    Event Name Info
    submit Triggered when a form is submitted.
    reset Triggered when a form is reset.
    change Triggered when the value of a form element changes.