JavaScript Keyboard: keydown and keyup
Before we get to keyboard, please note that on modern devices there are other ways to “input something”. For instance, people use speech recognition (especially […]
JS
JavaScript Pointer events
Pointer events are a modern way to handle input from a variety of pointing devices, such as a mouse, a pen/stylus, a touchscreen, and so […]
JavaScript Drag’n’Drop with mouse events
Drag’n’Drop is a great interface solution. Taking something and dragging and dropping it is a clear and simple way to do many things, from copying […]
JavaScript Moving the mouse: mouseover/out, mouseenter/leave
Let’s dive into more details about events that happen when the mouse moves between elements. 1. Events mouseover/mouseout, relatedTarget The mouseover event occurs when a mouse pointer […]
JavaScript Mouse events
In this chapter we’ll get into more details about mouse events and their properties. Please note: such events may come not only from “mouse devices”, […]
JavaScript Dispatching custom events
We can not only assign handlers, but also generate events from JavaScript. Custom events can be used to create “graphical components”. For instance, a root […]
JavaScript Browser default actions
Many events automatically lead to certain actions performed by the browser. For instance: A click on a link – initiates navigation to its URL. A […]
JavaScript Event delegation
1. Overview Capturing and bubbling allow us to implement one of most powerful event handling patterns called event delegation. The idea is that if we have […]
JavaScript Bubbling and capturing
Let’s start with an example. This handler is assigned to <div>, but also runs if you click any nested tag like <em> or <code>: Isn’t it a bit strange? […]
JavaScript Introduction to browser events
1. Overview An event is a signal that something has happened. All DOM nodes generate such signals (but events are not limited to DOM). Here’s a […]
JavaScript Coordinates
1. Oveview To move elements around we should be familiar with coordinates. Most JavaScript methods deal with one of two coordinate systems: Relative to the […]
JavaScript Window sizes and scrolling
How do we find the width and height of the browser window? How do we get the full width and height of the document, including […]
JavaScript Element size and scrolling
There are many JavaScript properties that allow us to read information about element width, height and other geometry features. We often need them when moving […]
JavaScript Styles and classes
Before we get into JavaScript’s ways of dealing with styles and classes – here’s an important rule. Hopefully it’s obvious enough, but we still have […]
JavaScript Modifying the document
DOM modification is the key to creating “live” pages. Here we’ll see how to create new elements “on the fly” and modify the existing page […]
JavaScript Attributes and properties
When the browser loads the page, it “reads” (another word: “parses”) the HTML and generates DOM objects from it. For element nodes, most standard HTML […]
JavaScript Node properties: type, tag and contents
Let’s get a more in-depth look at DOM nodes. In this chapter we’ll see more into what they are and learn their most used properties. […]
JavaScript Searching: getElement*, querySelector*
DOM navigation properties are great when elements are close to each other. What if they are not? How to get an arbitrary element of the […]
JavaScript Walking the DOM
The DOM allows us to do anything with elements and their contents, but first we need to reach the corresponding DOM object. All operations on […]
JavaScript DOM tree
The backbone of an HTML document is tags. According to the Document Object Model (DOM), every HTML tag is an object. Nested tags are “children” […]
