Event Browser Monitoring Using JS

Browser event refers to any action in the DOM elements, such as click, hover, drag, and many others. When an action occurs or a program’s state changes, it is said that an event has occurred.

Types of Browser Events

Following are the common browser event types:

1. Mouse Events

These events include clicking an element (click), pressing or releasing the mouse button over some element (mouse up/ mouse down), moving the mouse cursor over an element (mouseover/mouse out), and right-clicking to open the context menu (context menu).

2. Document Events

The DOM or document event signals the completion of document content to be loaded (DOMContentLoaded).

3. Keyboard Events

The keyboard events refer to the pressing and releasing of keyboard keys. (key-up, key-down).

4. CSS Events

The basic CSS event refers to finishing CSS animation (transitioned).

5. Form Element Events

The basic HTML form event refers to the form submission (submit).

6. Clipboard Events

The clipboard events refer to the cutting (onCut), copying (onCopy), or pasting (onPaste) of the element content.

7. Media Events

The media elements, such as audio, video, and others, can mostly trigger the media events. These events refer to the playing (onPlay), ending (onEnded), pausing (onPause), and others of the media elements.

Event Monitoring Methods

The users can assign event handlers to deal with the browser events. When an event occurs on any DOM node, it generates a signal that the handlers use to perform any user-defined actions. In Javascript, these handlers are defined as functions that run in case of user actions. Following are some of how the users can add event handlers to the DOM elements using javascript and monitor the browser events:

1. DOM Property

The users can assign an event handler such as click event handler to an element such as a button using a DOM property “on<event>.” They have to write the element’s variable name with a dot to access the object properties and then write the above property to add the handler.

Example

In the below example, the user creates a button “b” in HTML. In the Javascript file, he gets the created button element and adds an event handler to it. So, whenever the user clicks the button, it will send a signal to the handler function, and an alert box will appear on the user’s screen saying, “the button is pressed.”

<button class=”b” id=”b” value=”click” ></button>
<script>
var btn = document.getElementbyClass(“.b”);
btn.onclick = function() {
     alert(“the button is pressed.”);
}
</script>

2. HTML Attribute

The users can add the event handler to the HTML elements using the attribute “on<event>.” HTML can catch the event signal and start javascript whenever an event occurs on a specified element.

Examples

In the below example, the user creates the button and adds an “onClick” / “onclick” (case-insensitive) event handler, which displays an alert box saying that the “button is pressed.”

<button class=”b” id=”b”  onclick=”alert(‘button is pressed’)” value=”click”> </button>

The users can also call their custom javascript functions using the HTML attribute. In the below example, the user calls the function “buttonPressed” on the “onClick” action of the button. The user has defined the buttonPressed function in the javascript, which prints the “button pressed” on the user’s console.

function buttonPressed() {
console.log(“button pressed”);
}
<button class=”b” id=”b”  onclick=”buttonPressed()” value=”click”></button>

Note: The users can choose to write the javascript in the HTML attribute. However, it is not recommended to write it here as it can be messy and inconvenient for the user himself later. Therefore, it is a good practice to write HTML, javascript, and CSS in separate files or at least separately in a file. Moreover, If the user adds the event handler using HTML attribute and JS, the js event handler function will overwrite the HTML handler.

3. addEventListener

There are some events, such as “DOMContentLoaded,” that the users cannot access using the DOM property or HTML attribute. Therefore, the javascript has introduced the “addEventListener,” using which the users can access those events and add multiple events to an HTML element by removing them and adding these event listeners. Moreover, they can access the element itself by using the “this” keyword in the handler functions.

Example

In the below example, the user adds the “addEventListener” method to the document. When the DOM gets built completely, it triggers the event listener, which calls the “buildDom” function. The “buildDOM” function displays an alert box on the user’s screen with the text “DOM’s content is fully loaded.”

document.addEventListener(“DOMContentLoaded”, function() {
          alert(“DOM’s content is fully loaded”);
})

Moreover, the users can remove the event listener using the “removeEventListener” method on the same function.

Example

In the below example, the user adds an event listener to some button element and calls the “btnHandler()” function in it. This function changes the button’s color to red. Then, he removes the added event listener using the same “btnHandler()” function.

btnHandler(button b) {
 this.style.colour = “red”;
}
var btn = document.getElementbyClass(“.b”);
btn.addEventListener (“click” , btnHandler(this));
btn.removeEventListener (“click” , btnHandler(this));

Note: The users can explore the additional parameter of the above method, i.e.,  the “options” object, to get more control over the events’ occurrences.

4. Event Object

The event object is not a monitoring method, but in some scenarios, the users need to know the exact action and its details to proceed. For instance, they need to know which button or keyboard key the user has pressed to act accordingly. Whenever an event occurs, the browser encapsulates the event’s details in an object and sends it to the event handler. Therefore, the users can get the details using the “event” object inside the handler function.

Example

In the below example, the user adds an event listener to the button element and prints the event type and its coordinates on the user’s console.

var btn = document.getElementbyClass(“.b”);
btn.onclick = function (event) {
 console.log(event.type)
 console.log(event.clientX + “     “  + event.clientY)
}

Properties of the Event Object

Following are the properties of the event object:

1. type

It refers to the event type, such as onDrag and onClick.

2. currentTarget

It refers to the element on which the event has occurred, such as a button.

3. clientX / clientY

It refers to the cursor’s coordinates on the user’s screen.

Monitoring Events in the Browser Console

The browser allows the users to use the “monitorEvents()” method on HTML elements and monitor all the events occurring on those elements. The users pass the element as the function’s argument, and the function logs each event and its details on the browser’s console. Moreover, the users can also specify the event in the function’s argument, such as onDrag.

Example

In the below example, the user monitors all the click events occurring on the button element using the  function mentioned above:

var btn = document.getElementbyClass(“.b”);
monitorEvents(btn, ‘click’);

The users can also stop monitoring the events using the “unmonitorEvents()” function. They can either use the function to unmonitor all the events occurring on the element or specify the event to stop monitoring it.

In the below example, the user uses the above function to unmonitor all the click events on the specified button element.

var btn = document.getElementbyClass(“.b”);
unmonitorEvents(btn, ‘click’);

   

About the Author

ByteScout Team of Writers ByteScout has a team of professional writers proficient in different technical topics. We select the best writers to cover interesting and trending topics for our readers. We love developers and we hope our articles help you learn about programming and programmers.