-
JavaScript Scrolling
The next event we are going to look through is scroll: one of the most frequently used events in JavaScript, and not only. With the help of this event, you can react to a page or element scrolling. Here are a few pretty good things to do with it: A small function showing the current scroll is below: The…
-
JavaScript Keyboard: keydown and keyup
This chapter is dedicated to the study of keyboard, along with its keydown and keyup events, and their usage in JavaScript. As a rule, a keyboard event is generated by pressing a key: no matter it’s a symbol key or a special key, such as Shift, Ctrl, and more. Before getting to the keyboard, please consider…
-
Drag and Drop with JavaScript
One of the greatest interface solutions of JavaScript is known as “Drag and Drop”. In this chapter, we are going to find out what it is mainly used for, and why it should be an essential part of your work. Dragging and dropping something is a clear and straightforward way of doing multiple things: from copying and…
-
JavaScript Moving mouse: mouseover/out, mouseenter/leave
In this chapter, we are going to explore what comes about when the mouse moves between elements. Let’s start to dive into details about what mouseover, mouseout, mouseenter and mouseleave events are and how they operate. Events mouseover/mouseout, relatedTarget The mouseover event takes place when the pointer of the mouse comes over an element. On the contrary,…
-
JavaScript Mouse Events Basics
In this chapter, we are going to get into more details about the mouse events, along with their properties. Mouse events belong to the most common and significant event types. Mouse event object can be defined as a unity of events that happen when the mouse interacts with the HTML document. Please note that the…
-
JavaScript Mouse Events Basics
In this chapter, we are going to get into more details about the mouse events, along with their properties. Mouse events belong to the most common and significant event types. Mouse event object can be defined as a unity of events that happen when the mouse interacts with the HTML document. Please note that the…
-
JavaScript Dispatching Custom Events
Custom events are used for generating graphical components. It can create not only completely new events, but also built-in events such as mousedown, click, and so on. It can be handy for automated testing. Event Constructor Built-in event classes are similar to DOM element classes: they set up a hierarchy. The built-in Event class is the root. Event objects…
-
Browser Default Actions
As a rule, events automatically bring certain actions, implemented by the browser. For example, clicking a link will initiate navigation to its URL or pressing a mouse button over a text, and moving it will select that text, and so on. Sometimes, while handling events in JavaScript, you don’t want the matching browser action to occur. Instead of…
-
JavaScript Event Delegation
Bubbling and capturing allows implementing an extremely powerful event handling pattern, known as event delegation. The concept of event delegation is fairly simple, although, it can seem complicated at first sight. The main idea is the following: while having multiple elements handled similarly, you don’t have to assign a handler for each of them. Instead, you…
-
JavaScript Event Bubbling and Capturing
Among the most used terminology in JavaScript at the time of event flow are bubbling and capturing. In general, the event flow process is completed by the following three concepts: event capturing, event target, and event bubbling. Before starting to explain the concept of bubbling, let’s consider a case. In the example below, the handler is assigned…