HTML DOM & addEventListener on BrowserEvent

HTML DOM events allow JavaScript to register different event handlers on elements in an HTML document. Events are normally used in association with functions, and the function will not be executed before the event occurs (such as when a user clicks a button). DOM events, we notify us of something that has taken place, each event is represented by an object which is based on the Event interface. Events can represent everything from basic user interactions to automated notifications of things happening in the rendering model.

The Event interface represents an event which takes place in the DOM; some are user-generated (such as the mouse or keyboard events), while others are generated by APIs (such as events that indicate an animation has finished running, a video has been paused, and so forth). The event itself contains the properties and methods which are common to all events.

Mouse events:
click – when the mouse clicks on an element (touchscreen devices generate it on a tap).
contextmenu – when the mouse right-clicks on an element.
mouseover / mouseout – when the mouse cursor comes over / leaves an element.
mousedown / mouseup – when the mouse button is pressed/released over an element.
mousemove – when the mouse is moved.

Form element events:
submit – when the visitor submits a <form>.
focus – when the visitor focuses on an element, e.g. on a <input>.

Keyboard events:

Check more on most common event list 

Event handlers
To react to events we can assign a handler – a function that runs in case of an event. Handlers is a way to run JavaScript code in case of user actions. There are several ways to assign a handler. Let’s see them, starting from the simplest one.

A handler can be set in HTML with an attribute named on<event>.
<input value=”Click me” onclick=”alert(‘Click’)” type=”button”>

The EventTarget.addEventListener() method adds the specified EventListener-compatible object to the list of event listeners for the specified event type on the EventTarget on which it is called. The event target may be an Element in a document, the Document itself, a Window, or any other object that supports events (such as XMLHttpRequest).

element.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);
element.addEventListener(event, function, useCapture)

type : A case-sensitive string representing the event type to listen for.
listener : The object which receives a notification (an object that implements the Event interface) when an event of the specified type occurs. This must be an object implementing the EventListener interface, or a JavaScript function.
options Optional, An options object that specifies characteristics of the event listener.

  hoverSection: HTMLElement;

this.hoverSection = document.getElementById('hover');

this.hoverSection.addEventListener('mousemove', ev => {
In angular code