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
JavaScript unload Event Summary: in this tutorial, you will learn how to use the JavaScript unload event that fires when the document is fully unloaded. Note that you should never use the unload event, it’s only for reference. Introduction to the JavaScript unload event The unload event fires when a document has completely unloaded. Typically,…
Read more
JavaScript beforeunload Event Summary: in this tutorial, you will learn about the JavaScript beforeunload event that allows you to display a confirmation dialog when before you leave a webpage. Introduction to JavaScript beforeunload event Before the webpage and its resources are unloaded, the beforeunload event is fired. At this time, the webpage is still visible…
Read more
JavaScript DOMContentLoaded Summary: in this tutorial, you will learn about the JavaScript DOMContentLoaded event. The DOMContentLoaded fires when the DOM content is loaded, without waiting for images and stylesheets to finish loading. You need to handle the DOMContentLoaded event when you place the JavaScript in the head of the page but referencing elements in the…
Read more
JavaScript onload Summary: in this tutorial, you will learn how to handle the load event that fires on the document, image, and script elements in JavaScript. The window’s load event For the window object, the load event is fired when the whole webpage (HTML) has loaded fully, including all dependent resources, including JavaScript files, CSS…
Read more
JavaScript Page Load Events Summary: in this tutorial, you will learn about the events that are related to the page load including DOMContentLoaded, load, beforeunload, and unload. Overview of JavaScript page load events When you open a page, the following events occur in sequence: DOMContentLoaded – the browser fully loaded HTML and completed building the…
Read more
Handling Events in JavaScript Summary: in this tutorial, you will learn the various ways to perform event handling in JavaScript. When an event occurs, you can create an event handler which is a piece of code that will execute to respond to that event. An event handler is also known as an event listener. It…
Read more
JavaScript Events Summary: in this tutorial, you will learn about the JavaScript events, event models, and how to handle events. Introduction to JavaScript events An event is an action that occurs in the web browser, which the web browser feedbacks to you so that you can respond to it. For example, when users click a…
Read more
Getting the Width and Height of an Element Summary: in this tutorial, you will learn how to get the current computed dimension of an element, including width and height. The following picture displays the CSS box model that includes a block element with content, padding, border, and margin: To get the element’s width and height…
Read more