Event List

In the previous lesson, you learned what events are. If you haven’t read that lesson yet, I recommend you do so before continuing with this one.

In this lesson, you will learn about the different events you can listen to.

Important ✋

This lesson can literally overwhelm you! If you are a beginner, many things will sound strange and complicated to you at first. But don’t worry! You don’t have to memorize this lesson. It simply provides you with an overview of the events provided in Bricksforge. You will never need all of them. So just get a rough overview and come back here if you want to learn more about one or the other event.

And the great thing: it actually sounds complicated, but in reality, it’s not that hard at all 😎

Document Events

Document events are events that are triggered on the document object. Bricksforge provides the following document events:

On Pageload

The This event is triggered when the page has finished loading. Think of the DOMContentLoaded event like the bell that rings when school starts. It tells you that the webpage is completely ready for you to read, watch videos, or interact with it in other ways. This event is useful for things like showing pop-ups that say “Welcome!” or turning off a “loading” sign when the page is ready.

On Scroll Position

The scroll event is triggered when the user scrolls up or down on the page. This event is useful for things like showing a “back to top” button when the user scrolls down, or for creating a “sticky” navigation bar that follows the user as they scroll.

For this event, you can specify the scroll position at which you want the event to be triggered. For example, you can trigger the event when the user scrolls 100 pixels down the page.

On Scroll Up

The scroll up event is triggered when the user scrolls up on the page. This can be very useful. For example, if you scroll up, you might want to show the navigation bar that was hidden when you scrolled down.

On Scroll Down

The scroll down event is triggered when the user scrolls down on the page. In this case, you might want to hide the navigation bar when the user scrolls down – just to give you an idea.

On Visibility Change

The visibilitychange event is triggered when the visibility state of the web page changes. This means it fires when the user navigates away from the tab or window containing your web page and then returns to it.

For example, if you are watching a video on a webpage and you switch to another tab, the video can pause automatically. When you come back to the tab, the video can start playing again.

In Viewport

The In Viewport concept means checking if something on a webpage is visible on your screen. This can be useful for things like loading images only when you scroll to them or starting animations when you see a certain part of the page. Or a video might start playing only when you scroll to it, or an advertisement might load only when it comes into view.

This approach helps to create a smoother and faster user experience by only using resources when necessary. It’s like saving your energy to focus on what’s right in front of you instead of everything at once.

Not In Viewport

The Not in Viewport concept refers to detecting when an element on a webpage is not currently visible within the part of the screen that the user can see (the viewport). This is useful for various purposes, such as pausing unnecessary activities and optimizing performance.

Window Events

Window events are actions or changes that happen to the whole browser window, not just parts of the webpage. These events help us make our websites respond to what the user is doing with the window. Bricksforge provides the following window events.

On Window Resize

A window resize event happens when the user changes the size of the browser window. This could be making the window larger, smaller, or changing its shape by dragging the edges or corners. When this event occurs, it can trigger certain actions on your webpage to adjust its content and layout to fit the new window size.

Mouse Events

Mouse events are actions that happen when the user interacts with a webpage using a mouse. These events help the webpage respond to different types of mouse actions, such as clicking, moving the mouse, or scrolling.

On Click

The On Click event occurs when a user presses and releases a mouse button over an element on a webpage. This is one of the most common and important events in web development because it allows users to interact with the webpage by performing actions like opening links, submitting forms, and triggering various functionalities.

What Happens During an On Click Event?

1. Mouse Down: The user presses a mouse button.
2. Mouse Up: The user releases the mouse button.
3. Click: The action of pressing and releasing the mouse button completes the click event.

On Double Click

The On Double Click event occurs when a user quickly presses and releases a mouse button twice over an element on a webpage. This event is similar to the single click event but requires two consecutive clicks within a short time frame. The double click event allows for more complex interactions and functionalities that are distinct from single click actions.

What Happens During an On Double Click Event?

1. First Click: The user presses and releases the mouse button.
2. Second Click: The user presses and releases the mouse button again quickly after the first click.
3. Double Click: The action of two rapid clicks completes the double click event.

On Mouseover

The On Mouseover event occurs when the user’s mouse pointer moves over an element on a webpage. This event is useful for creating interactive effects that respond to the user’s movements, such as highlighting, showing tooltips or following the cursor.

What Happens During an On Mouseover Event?

1. Mouse Enter: The user’s mouse pointer moves into the area of an element.
2. Mouseover: The event is triggered as the pointer enters the element, allowing you to perform specific actions.

On Mouseenter

The On Mouseenter event occurs when the user’s mouse pointer enters the area of an element on a webpage. This event is similar to the On Mouseover event, but with a key difference: it only triggers when the mouse enters the target element itself, not when it moves over any child elements. This makes On Mouseenter particularly useful for certain types of interactions where you only want to trigger actions when the mouse first enters a specific element.

On Mouseleave

The On Mouseleave event occurs when the user’s mouse pointer exits the area of an element on a webpage. This event is useful for reversing or stopping actions that were triggered when the mouse entered the element, ensuring a seamless user experience.

On Mousedown

The On Mousedown event occurs when the user presses a mouse button while the pointer is over an element on a webpage. This event is useful for detecting the initial press of a mouse button, allowing you to start certain actions or interactions before the button is released.

On Mouseup

The On Mouseup event occurs when the user releases a mouse button while the pointer is over an element on a webpage. This event is useful for detecting when the user finishes pressing a mouse button, allowing you to complete certain actions or interactions that began with a On Mousedown event.

On Mousemove

The On Mousemove event occurs when the user moves the mouse pointer over an element on a webpage. This event is triggered repeatedly as the mouse moves, allowing you to track the mouse’s position and perform actions that require continuous updates. This would be the right event when creating an element which is following the cursor, for instance.

Touch Events

Touch events are actions that occur when a user interacts with a touchscreen device, such as a smartphone or tablet. These events allow developers to respond to various types of touch interactions, making web applications more interactive and mobile-friendly.

On Touchstart

The On Touchstart event occurs when one or more fingers touch the screen of a touchscreen device. This event is the starting point for many touch interactions and is essential for detecting the beginning of touch gestures.

What Happens During an On Touchstart Event?

1. Finger Touches Screen: The user places one or more fingers on the screen.
2. Touchstart: The event is triggered as soon as the fingers make contact with the screen.

On Touchend

The On Touchend event occurs when one or more fingers are lifted from the screen of a touchscreen device. This event marks the end of a touch interaction and is essential for completing touch gestures and actions.

What Happens During an On Touchend Event?

1. Finger Leaves Screen: The user lifts one or more fingers off the screen.
2. Touchend: The event is triggered as soon as the fingers are no longer touching the screen.

On Touchmove

The On Touchmove event occurs when the user moves one or more fingers across the screen of a touchscreen device while maintaining contact. This event is essential for detecting and responding to continuous touch movements, allowing for dynamic and interactive behaviors.

What Happens During an On Touchmove Event?

1. Finger Touches Screen: The user places one or more fingers on the screen, typically starting with a “touchstart” event.
2. Finger Moves: The user moves their fingers across the screen while keeping contact.
3. Touchmove: The event is triggered continuously as the fingers move.

On Touchcancel

The On Touchcancel event occurs when a touch event is interrupted and needs to be canceled. This can happen for various reasons, such as the system taking control (e.g., an incoming call), the touch moving out of the detectable area, or other interruptions. The touchcancel event helps ensure that your application can gracefully handle these interruptions.

What Happens During an On Touchcancel Event?

1. Touch Interruption: The ongoing touch interaction is interrupted or canceled.
2. Touchcancel: The event is triggered, signaling that the touch action should be stopped.

Pointer Events

Pointer events are a unified way to handle different types of input devices such as a mouse, touch, or stylus (pen) on a webpage. This API provides a consistent set of events that can handle various input methods, making it easier to create interactive and responsive web applications.

The names of the corresponding events do not differ greatly from mouse events, for example On Pointer Enter or On Pointer Move. We will therefore not go into this separately in this lesson.

Keyboard Events

Keyboard events are actions that occur when a user interacts with a keyboard. These events are essential for handling user input in text fields, shortcuts, form submissions, and more. Keyboard events allow developers to capture and respond to key presses, providing a way to create interactive web applications.

On Keyup

The On Keyup event occurs when the user releases a key on the keyboard. This event is useful for detecting when a key press has been completed and is often used to handle actions that should occur after the user has finished typing or performing a key press.

What Happens During an On Keyup Event?

1. Key Pressed: The user presses a key down (this might trigger a keydown event).
2. Key Held Down: The key remains pressed (this might involve continuous keydown events if held).
3. Key Released: The user releases the key, triggering the keyup event.

On Keydown

The On Keydown event occurs when the user presses a key on the keyboard. This event is triggered as soon as the key is pressed down, making it useful for detecting and responding to key presses immediately. It’s often used for initiating actions or handling continuous input.

What Happens During an On Keydown Event?

1. Key Pressed Down: The user presses a key, and the keydown event is triggered immediately.
2. Key Held Down: If the key remains pressed, the event continues to fire, allowing for repeated actions.

Form Events

Form events are actions or occurrences that happen to form elements on a webpage, such as input fields, checkboxes, radio buttons, and the form itself. These events allow developers to manage user interactions with forms, handle form submissions, validate input data, and provide real-time feedback.

On Submit

The On Submit event occurs when a form is submitted. This event allows developers to handle the form submission process, including validating the data, preventing the default submission action, and processing or manipulating the form data before it is sent to the server.

What Happens During an On Submit Event?

1. Form Submission Attempt: The user submits the form by clicking a submit button or pressing Enter within a form field.
2. Submit Event Triggered: The submit event is fired on the form element.
3. Event Handling: Any associated event handler functions are executed. This is where you can perform various event actions.

On Change

The On Change event occurs when the value of an input element, such as a text field, checkbox, select menu, or other form element, changes and the change is committed. This event is essential for handling changes to input values and updating the application state or UI accordingly.

What Happens During an On Change Event?

1. Value Change: The user changes the value of an input element.
2. Commitment: The change is committed (for example, when the user moves focus away from the input or selects an option).
3. Change Event Triggered: The change event is fired on the input element.
4. Event Handling: Any associated event actions are executed to respond to the change.

On Input

The On Input event occurs whenever the value of an input element changes. Unlike the On Change event, which fires only when the change is committed (such as when the user moves focus away from the field), the “On Input” event fires immediately as the value changes. This makes it ideal for real-time validation and feedback.

What Happens During an On Input Event?

1. Value Change: The user types, deletes, or otherwise modifies the input value.
2. Input Event Triggered: The input event is fired on the input element with every change.
3. Event Handling: Any associated event actions are executed to respond to the change in real time.

On Focus

The On Focus event occurs when an element, such as an input field, gains focus. This event is essential for handling actions that should occur when the user starts interacting with an input element. It is commonly used to highlight fields, show tooltips, or prepare the form for user input.

What Happens During an On Focus Event?

1. Focus Gain: The user clicks on, tabs into, or otherwise selects an input element.
2. Focus Event Triggered: The focus event is fired on the element.
3. Event Handling: Any associated event actions are executed to respond to the element gaining focus.

On Blur

The On Blur event occurs when an element, such as an input field, loses focus. This event is essential for handling actions that should occur when the user stops interacting with an input element. It is commonly used to validate input, hide tooltips, or update the user interface based on the input provided.

What Happens During an On Blur Event?

1. Focus Loss: The user clicks away from, tabs out of, or otherwise deselects an input element.
2. Blur Event Triggered: The blur event is fired on the element.
3. Event Handling: Any associated event actions are executed to respond to the element losing focus.

Observers

Observers are a way to help different parts of your website keep in touch and stay updated when something changes. Think of it like a subscription to a magazine: when there’s new content, the magazine sends it to all its subscribers. Similarly, in web development, observers are like subscribers that get notified when something they care about changes.

Mutation Observer

A MutationObserver watches for changes in the DOM of a webpage. It allows you to react to changes in elements, such as when nodes are added or removed, attributes are modified, or text content changes.

Imagine you have a comment section on your webpage. Each time a new comment is added, you want to automatically scroll to the newest comment to ensure the user sees it without having to manually scroll down.

By using a MutationObserver, you can watch the comment list for changes. When a new comment is added, the observer will detect this change and trigger a function to scroll the page to the new comment.

Resize Observer

A ResizeObserver monitors an element’s size and executes an event action whenever the element’s size changes. This can be useful for adjusting layouts, resizing images, and ensuring that content fits within its container.

Imagine you have a dashboard with a resizable sidebar. Inside the sidebar, you have several widgets that need to adjust their sizes dynamically to fit the sidebar as it is resized. You want the widgets to resize automatically whenever the sidebar’s size changes.

By using a ResizeObserver, you can watch the sidebar for changes in its size. When the sidebar is resized, the observer will detect this change and trigger a function to adjust the sizes of the widgets accordingly.

Bricks Slider Events

You can listen for various events triggered by the Bricks Slider, which is using SplideJS as library. Since the names of the events are quite self-explanatory, we will not go into detail about them in this lesson. Bricks Slider Events are very helpful for reacting to changes in the slider. For example, you could execute event actions after the slide has changed.

Available Events: On Slide Move, On Slide Moved, On Slide Visible, On Slide Hidden, On Slide Click, On Slide Resize, On Slide Resized, On Slide Drag, On Slide Dragging, On Slide Dragged, On Slide Overflow.

Bricksforge Events

There are events for various areas of Bricksforge that you can listen for.

On Live Update

This event is linked to the Pro Forms element. Whenever a Live Update value changes, this event is triggered. You will find the change in the event data and can use it in the event actions.

WP Gridbuilder Events

WPGridBuilder offers a variety of JavaScript events that can be used to enhance the functionality and interactivity of your grids and facets. Bricksforge provides you the following events.

On Facet Init

The On Facet Init event is one of the many JavaScript events provided by WPGridBuilder. This event is triggered when a facet (a filter used to refine search results) is initialized. It allows you to run event actions whenever a facet is set up.

On Facet Loaded

The On Facet Loaded event is triggered after a facet has finished loading, which means all the necessary data and components of the facet are fully loaded and ready for interaction. This event allows developers to run event actions right after the facet becomes operational, making it useful for applying final adjustments or triggering actions based on the loaded facet.

On Facet Appended

The On Facet Appended event is triggered when new facet items are appended to an existing facet. It allows to run event actions whenever new items are added, enabling them to adjust the UI or perform actions based on the new items.

On Facet Refresh

The On Facet Refresh event is triggered when a facet is refreshed. Facet refreshes typically occur when the data or state of the facet needs to be updated, such as when the user interacts with the facet or when new data is loaded.

On Facet Change

The On Facet Change event is triggered whenever the value of a facet changes. This can occur due to user interaction, such as selecting or deselecting a filter option, or programmatically via script.

On Facet Reset

The On Facet Reset event is triggered whenever a facet is reset, either by user action (e.g., clicking a reset button) or programmatically.

Custom Events

Bricksforge also offers you a way to define custom events by simply entering the name of the event and specifying the DOM element.

In the next lesson, you will get to know what actions are!