JavaScript MutationObserver Summary: in this tutorial, you will learn how to use the JavaScript MutationObserver API to watch for changes being made to the DOM tree. Introduction to the JavaScript MutationObserver API The MutationObserver API allows you to monitor for changes being made to the DOM tree. When the DOM nodes change, you can invoke…
Read more
JavaScript Custom Events Summary: in this tutorial, you will learn about the JavaScript custom events such as creating a custom event and dispatching it. Introduction to JavaScript custom events The following function highlights an element by changing its background color to yellow: function highlight(elem) { const bgColor = ‘yellow’; elem.style.backgroundColor = bgColor; } Code language:…
Read more
JavaScript dispatchEvent Summary: in this tutorial, you’ll learn how to programmatically create and dispatch events using Event constructor and dispatchEvent() method. Typically, events are generated by user actions such as mouse clicks and key presses. In addition, events can be generated from code. To generate an event programmatically, you follow these steps: First, create a…
Read more
JavaScript Event Delegation Summary: in this tutorial, you will learn how to use the JavaScript event delegation that adds a single event handler to the parent element instead of having to register multiple event handlers to the child elements. Introduction to JavaScript Event Delegation Suppose that you have the following menu: <ul id=”menu”> <li><a id=”home”>home</a></li>…
Read more
JavaScript hashchange Event Summary: in this tutorial, you will learn about the JavaScript hashchange event and how to handle it effectively. Introduction to the JavaScript hashchange event The URL hash is everything that follows the pound sign (#) in the URL. For example, suppose that you have the following URL: https://python-tutorials.in/javascript-hashchange-event/#header Code language: JavaScript (javascript)…
Read more
JavaScript Focus Events Summary: in this tutorial, you will learn about the JavaScript focus events that keep track of the elements that users focus on. Introduction to JavaScript focus events The focus events fire when an element receives or loses focus. These are the two main focus events: focus fires when an element has received…
Read more
JavaScript scrollIntoView Summary: in this tutorial, you’ll learn how to scroll an element into the view using its scrollIntoView() method. Suppose you have a list of elements and you want a specific element to be highlighted and scrolled into view. To achieve this, you can use the element.scrollIntoView() method. The element.scrollIntoView() accepts a boolean value…
Read more
JavaScript Scroll Events Summary: in this tutorial, you will learn about JavaScript scroll events and how to handle scroll events properly. Introduction to the JavaScript scroll events When you scroll a document or an element, the scroll events fire. You can trigger the scroll events in the following ways, for example: Using the scrollbar manually…
Read more
JavaScript Keyboard Events Summary: in this tutorial, you will learn how to work with JavaScript keyboard events including keydown, keypress, and keyup. Introduction to JavaScript keyboard events When you interact with the keyboard, the keyboard events are fired. There are three main keyboard events: keydown – fires when you press a key on the keyboard…
Read more
JavaScript Mouse Events Summary: in this tutorial, you will learn about the basic mouse events and their properties in JavaScript. Introduction to JavaScript mouse events Mouse events fire when you use the mouse to interact with the elements on the page. DOM Level 3 events define nine mouse events. mousedown, mouseup, and click When you…
Read more