wheel

16 March, 2023

Contributors

Milsaware

@milsaware

About

The wheel event is triggered when a user rotates the mouse wheel or trackpad on their computer. This event is commonly used in web development to add functionality to web pages and web applications, such as scrolling, zooming, and panning.

The wheel event provides developers with a way to respond to user input in real-time, allowing for a more interactive and responsive user experience. When the wheel event is triggered, the browser sends an event object to the JavaScript code, which can then be used to access information about the user's input, such as the direction and speed of the wheel rotation.

Overall, the wheel event is a useful tool for developers looking to enhance the functionality and usability of their projects.

Event listener

Here's an example of how to use an event listener to detect the wheel event:

HTML

<div id="my-element">Scroll here</div>

JavaScript

// Get a reference to the element you want to add the event listener to
const myElement = document.getElementById("my-element");

// Add an event listener for the 'wheel' event
myElement.addEventListener("wheel", event => {
    // Handle the 'wheel' event here
    console.log("Wheel event detected!");
});

Here, we're using the addEventListener method to attach a wheel event listener to an HTML element with the ID my-element. When the user scrolls with their mouse wheel over this element, the anonymous arrow function passed as the second argument to addEventListener will be executed.

Inside this function, you can perform any actions you want in response to the wheel event. For example, you could adjust the scroll position of the element, zoom in or out, or perform some other action that enhances the user experience of your web page or application.

Property

Here's an example of how to use the onwheel property to add a wheel event listener to an HTML element:

const myElement = document.getElementById("my-element");

// Assign a function to the 'onwheel' property of the element
myElement.onwheel = function(event) {
    // Handle the 'wheel' event here
    console.log("Wheel event detected!");
};

Here, we're assigning a function to the onwheel property of an HTML element with the ID my-element. When the user scrolls with their mouse wheel over this element, the function assigned to onwheel will be executed.

Inline

Here's an example of how to use the onwheel attribute to add a wheel event listener directly to an HTML element:

<div onwheel="handleWheelEvent(event)">
    <!-- Your element's contents here -->
</div>

Here, we're adding a wheel event listener directly to a <div> element using the onwheel attribute. When the user scrolls with their mouse wheel over this element, the handleWheelEvent function specified in the attribute will be executed.

Inside the handleWheelEvent function, you can perform any actions you want in response to the wheel event. For example, you could adjust the scroll position of the element, zoom in or out, or perform some other action that enhances the user experience of your page or application.

Note that using the onwheel attribute to add event listeners directly to HTML elements is generally not considered best practice in modern app development. Instead, it's recommended to use the addEventListener method or the onwheel property in JavaScript to add event listeners dynamically. However, the onwheel attribute can still be useful in certain situations, such as when you need to add a simple wheel event listener to a static HTML element.

Programmatic trigger

There is no wheel() method to trigger the wheel event programmatically. However, you can use the dispatchEvent() method to manually dispatch a wheel event to an HTML element:

// Get a reference to the element you want to dispatch the event to
const myElement = document.getElementById("my-element");

// Create a new 'WheelEvent' object with the desired parameters
const wheelEvent = new WheelEvent("wheel", {
    deltaX: 10,
    deltaY: 0,
    deltaZ: 0,
    deltaMode: 0
});

// Dispatch the 'wheel' event to the element
myElement.dispatchEvent(wheelEvent);

Here, we're using the dispatchEvent() method to manually dispatch a wheel event to an HTML element with the ID my-element.

First, we create a new WheelEvent object with the desired parameters. In this case, we're specifying a deltaX value of 10 and a deltaY value of 0, which would simulate a horizontal scroll to the right. You can adjust these parameters to simulate different types of wheel events.

Then, we use the dispatchEvent() method to dispatch the wheel event to the element. This will trigger any wheel event listeners that are attached to the element, allowing you to simulate user input programmatically.

Note that while it's possible to dispatch events programmatically using dispatchEvent(), it's generally better to use user input to trigger events whenever possible, as this provides a more realistic and reliable user experience.