Two separate `event` object methods exist for stopping an event: `event.stopPropagation()` and `event.stopImmediatePropagation()`. This lesson will explain the differences between these two functions as well as cautioning you about some dangers in stopping ... more
This lesson explores some of the strangeness of the target phase, including the execution of capture and bubble phase event listeners added to the event target. ... more
Sometimes you need to use `addEventListener` to listener to particular events as there are no corresponding HTML attribute or object property event handlers for the event. ... more
Event listeners are provided with an `event` object that represents an actively dispatched event. An `event` object contains lots of information and functionality related to an event. We will look at the various event properties, constants and methods ... more
It is common to log `event` objects to the `console`. However, it is important to keep in mind that object properties are evaluated in objects logged to the `console` when the object is first expanded. ... more
`removeEventListener` removes an event listener added with `addEventListener`. However, there are a number of gotchas to watch out for in order to correctly remove an event listener. ... more
It is possible to add many event listeners using different binding approaches to an `EventTarget`. In this lesson, I explain in what order event listeners will be executed in. ... more
Using HTML attributes event handlers and object property event handlers are related ways of expressing a single event listener binding to an element. This lesson explores the dynamics and often strangeness of that relationship. ... more
In this lesson, we explore how you can add event listeners to an event target with `addEventListener`. It will also explain how you can control aspects of your event listener binding; as well as event listener equality. ... more
You can listen and respond to events on an element from within JavaScript using the object property event handlers. This lesson explores how you can add, use and remove event handlers to an element. ... more
It is possible for code authored in HTML attributes to be executed when a matching event is called. This lesson goes over the nuances of adding, using and removing event handlers using HTML attributes. ... more
Explaining what an `event` is, how they are dispatched to `EventTargets`, and you can respond to those events by adding **event listeners**. This lesson also covers how events move through `EventTarget`'s that participate in a tree (such as elements in ... more
This is a light introduction to the DOM events problem space and overview of the major topics that we will be covering. I will also introduce people to https://domevents.dev ... more
Some browsers treat some events added to the `body` as passive by default. However, HTML attribute event handlers on the `body` do not share these default passive values. ... more
Events are classified as either synchronous or asynchronous (ordered or unordered). This lesson will explore what these categorisations really mean and what it means to you. ... more
Some browsers treat some events added to the `body` as passive by default. However, HTML attribute event handlers on the `body` do not share these default passive values. ... more
Chrome Devtools can be really powerful, when it comes to debug JavaScript, inspect DOM nodes and their properties as well as CSS styling. in this lesson we're quickly having a look at the "CSS Overview" feature of Chrome Devtools, that allows ... more
In this lesson, we're going over how to create private class fields using TypeScript's `private` modifier. However, as we're going to see, the `private` modifier doesn't give us any actual protection at runtime; it only exists in TypeScript's type system ... more
In this lesson, we're going to learn about conditional types, a powerful feature of TypeScript's type system. Conditional types let us express non-uniform type mappings, that is, type transformations that differ depending on a condition. A conditional ... more
This lesson introduces private class fields which (unlike regular class fields) cannot be examined or modified outside of the class they're defined in. We're going to contrast private class fields with TypeScript's `private` modifier and public class ... more
Closures are an alternative to truly private class fields. If you need to encapsulate a private variable so that it can only be accessed in a controlled way, you can use a closure. This technique is particularly useful when your code has to run in older ... more
In this lesson, we're going to explore template literal types, another powerful feature of TypeScript's type system. Template literal types have the same syntax as template literals in JavaScript, but they're used in type positions. Using template literal ... more
In this final lesson, we're going to dive deep into a more complex example in which we combine mapped types, key remapping, template literal types, and indexed access types to statically type a highly dynamic JavaScript function in TypeScript. ... more
This lesson introduces the `??` operator which is known as [nullish coalescing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator). The `??` operator produces the value on the right-hand side if (and ... more
This lesson introduces the `?.` operator which is known as [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining). We're going to look at how we can use `?.` to safely descend into an object ... more