Skip to main content

Browser Events

Browser Events: Browser Events

What is an event concerning the DOM, Browser, and JavaScript?​

View Answer:
Interview Response: An event is a signal that something has happened. All DOM nodes generate such signals (but events are not limited to DOM).

Can you name at least three DOM events?​

View Answer:
Interview Response: There are several DOM events, including mouse, keyboard, form element, document, and CSS events. The most common is mouse and keyboard events, like mouse click and keyboard `keydown` events.

What is a JavaScript event handler?​

View Answer:
Interview Response: A JavaScript event handler is a function that runs in the case of an event. Handlers are a way to run JavaScript code in case of user actions. There are several ways to assign a handler.

Can you execute an event in an HTML attribute?​

View Answer:
Interview Response: We can set an event handler in HTML with an attribute named on‹event›. The onevent handlers are properties on specific DOM elements to manage how that element reacts to events. The onevent handler usually gets named with the event it reacts to, like onclick, onkeypress, and onfocus.

Technical Response: You can set an event handler in HTML with an attribute named on‹event›. The onevent handlers are properties on particular DOM elements to manage how that element reacts to events. Elements can be interactive (links, buttons, images, forms, and more.) or non-interactive (such as the base ‹body› element). The onevent handler usually gets named with the event it reacts to, like onclick, onkeypress, and onfocus. You can specify an on‹…› event handler for a particular event (such as click) for a given object differently. An HTML attribute is not a convenient place to write tons of code. So, it gets recommended to us that we write an event handler. As we know, HTML attribute names are not case-sensitive, so ONCLICK works as well as onClick and onCLICK… But usually, attributes are lowercased: onclick.

Code Example: HTML Event Attribute onclick

<!-- alerts Click! in the browser -->
<input value="Click me" onclick="alert('Click!')" type="button">

Code Example: Event Handler (recommended)

<script>
  function countRabbits() {
    for (let i = 1; i <= 3; i++) {
      alert('Rabbit number ' + i);
    }
  }
</script>

<input type="button" onclick="countRabbits()" value="Count rabbits!" />

Is connecting a handler with a DOM on<event> property possible?​

View Answer:
Interview Response: Yes, we can assign a handler using a DOM property on‹event›. If the handler is assigned using an HTML attribute, the browser reads it, creates a new function from the attribute content, and writes it to the DOM property. This action is similar to using a function as an event handler, but it’s less direct.

Code Example:

<input id="elem" type="button" value="Click me" />
<script>
  elem.onclick = function () {
    alert('Thank you');
  };
</script>

Is it possible to utilize an event on a DOM element more than once?​

View Answer:
Interview Response: No, not directly; the second event gets overwritten, and the current event returns the second value. We have to implement an event listener if we intend to add more than one handler.

Code Example:

<input type="button" id="elem" onclick="alert('Before')" value="Click me" />
<script>
  elem.onclick = function () {
    // overwrites the existing handler
    alert('After'); // only this After will be shown
  };
</script>

What is the reason for not using setAttribute for handlers?​

View Answer:
Interview Response: The reason behind not using setAttribute for handlers is that attributes are always a string so that the function becomes a string instead of a function.

Code Example: This will not work!

// a click on <body> will generate errors,
// because attributes are always strings, function becomes a string
document.body.setAttribute('onclick', function () {
  alert(1);
});

Are DOM properties names case-sensitive or case-insensitive?​

View Answer:
Interview Response: DOM property names are case-sensitive. We should assign a handler to elem.onclick, not elem.ONCLICK.

Explain the function and syntax of the EventTarget addEventListener method?​

View Answer:
Interview Response: The EventTarget method addEventListener(event, target, options) sets up a function call whenever the specified event gets delivered to the target. Typical targets are Element, Document, and Window, but the target may be any object that supports events (such as XMLHttpRequest).

Syntax:

target.addEventListener(event, handler [, options]);
target.addEventListener(event, handler [, useCapture]);
target.addEventListener(event, handler [, useCapture, wantsUntrusted
    // This API has not been standardized.
]); // Gecko/Mozilla only

Code Example:

<input id="elem" type="button" value="Click me" />

<script>
  function handler1() {
    alert('Thanks!');
  }

  function handler2() {
    alert('Thanks again!');
  }

  elem.onclick = () => alert('Hello');
  elem.addEventListener('click', handler1); // Thanks!
  elem.addEventListener('click', handler2); // Thanks again!
</script>

How should you remove a previously added event listener?​

View Answer:
Interview Response: To remove an event that gets added, use the removeEventListener(event, handler) function. We should pass the same function that we previously allocated to delete a handler. We cannot remove the function if it does not get stored in a variable. There are no techniques available for "reading back" handlers given by addEventListener.

Code Example:

<script>
  function handler() {
    alert('Thanks!');
  }

  input.addEventListener('click', handler);
  // ....
  input.removeEventListener('click', handler);
</script>

Is there any event that you cannot assign using a DOM property?​

View Answer:
Interview Response: Yes, there are events that a DOM property cannot assign. Only when using addEventListener. The DOMContentLoaded event, for example, is triggered when the page is loaded and the DOM gets created, and the addEventListener method is more adaptive in this case.

Code Example:

// will never run
document.onDOMContentLoaded = function() {
  alert("DOM built");
};

// this way it works
document.addEventListener("DOMContentLoaded", function() {
  alert("DOM built");
});

What is the event object used for in JavaScript?​

View Answer:
Interview Response: Web developers use the event object for various actions, including getting the event type, current target, and window relative coordinates of the current during point events. The event object can be called directly in HTML attributes or inside our scripts.

Code Example:

<!-- event.type returns the type of event (onclick: click) -->
<input type="button" onclick="alert(event.type)" value="Event type" />

Are we limited to just function handler in JavaScript?​

View Answer:
Interview Response: We can assign not just a function but also an object as an event handler using addEventListener. When an event occurs, the object handler method gets invoked, and we could also use a class as another approach.

Code Example: Regular Object

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

<script>
  let obj = {
    handleEvent(event) {
      alert(event.type + ' at ' + event.currentTarget);
    },
  };

  elem.addEventListener('click', obj);
</script>

Code Example: Class

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

<script>
  class Menu {
    handleEvent(event) {
      switch (event.type) {
        case 'mousedown':
          elem.innerHTML = 'Mouse button pressed';
          break;
        case 'mouseup':
          elem.innerHTML += '...and released.';
          break;
      }
    }
  }

  let menu = new Menu();
  elem.addEventListener('mousedown', menu);
  elem.addEventListener('mouseup', menu);
</script>