Spread the love

In JavaScript, events are actions that happen in an app. They’re triggered by various things like inputs being entered, forms being submitted, and changes in an element like resizing, or errors that happen when an app is running, etc. We can assign an event handler to handle these events. Events that happen to DOM elements can be handled by assigning an event handler to properties of the DOM object for the corresponding events. In this article, we’ll look at how to use the onwheel for handling scroll wheel events, onpause and onplay for handling pause and play events for media elements.

onwheel

The onwheel property of a DOM object lets us assign an event handler function to it to handle the wheel event. The event is fired when the mouse wheel is rotated. It’s not the same as onscroll since scrolling doesn’t always involve using the mouse wheel.

For example, we can use the onwheel event handler function to change the size of a box when we rotate the mouse wheel. To do this, first, we add a div to the HTML code that makes a box which we can change the size for:

<div>Make me bigger or smaller by rotating the mouse wheel.</div>

Then we style the div element by changing the size, position, and color of it as we do in the following code:

div {  
  width: 100px;  
  height: 100px;  
  background: lightblue;  
  padding: 5px;  
  transition: transform .3s;  
  margin: 0 auto;  
  margin-top: 100px;  
}

Finally, we add the JavaScript code which makes use of the onwheel event handler function to scale the div element depending on the scroll direction of the mouse wheel:

let scale = 1;
const zoom = (event) => {  
  event.preventDefault();  
  if (event.deltaY < 0) {  
    scale *= event.deltaY * -1.1;  
  } else {  
    scale /= event.deltaY * 1.1;  
  }  
  scale = Math.min(Math.max(.1, scale), 3);  
  el.style.transform = `scale(${scale})`;  
}

const el = document.querySelector('div');  
document.onwheel = zoom;

In the code above, if we move the mouse wheel counter-clockwise, then the div gets bigger. Otherwise, it gets smaller. It does this by getting the deltaY property from the event object. When deltaY is negative, which means the mouse wheel is scrolling counter-clockwise, so we multiply it by -1.1 to make the scale variable positive and we multiply the existing scale value with this number to increase the size of the div . Otherwise, we divide instead so that the div shrinks.

After the if statement, we restrict the scale variable to be between .1 and 3 so that it won’t get infinitely big or infinitesimally small. Finally, we assign the scale value to the transform property by running el.style.transform = `scale(${scale})`; .

onpause

The pause event is fired when media playback has been paused. To handle this event, we can assign an event handler function to the onpause property a DOM element.

The pause event is sent when a request to pause an activity is handled and the activity has entered a paused state. This is most common when we pause audio or video by manually pausing media playback or calling the pause() method to do the same thing. The event is fired once the pause() method returns and after the media element’s paused property has been changed to true .

For example, we can log whether a video is paused or not by writing some code. First, we add the HTML code for the video element as we have below:

<video controls src='https://sample-videos.com/video123/mp4/240/big_buck_bunny_240p_30mb.mp4'></video>

Then in the JavaScript code, we can assign our event handler function to the onpause property of the video DOM object:

const video = document.querySelector('video');
video.onpause = (event) => {  
  console.log('video paused');  
};

After that, we should see the ‘video paused’ message when we pause a video.

The ‘video paused’ message will also show if we call the pause method on the video DOM object. For example, if we write the following code instead of what we have above:

const video = document.querySelector('video');  
video.play();  
setTimeout(() => {  
  video.pause();  
}, 2000)

video.onpause = (event) => {  
  console.log('video paused');  
};

Then the video will play for 2 seconds and the pause will be called on the video DOM object, which then will trigger the pause event to fire. Then we’ll see the ‘video paused’ message logged.

onplay

The onplay property of a DOM media element like audio or video lets us assign and event handler function to these objects. It handles the play event which is fired when the media element’s paused property changes from true to false , either as a result of calling the play method on the media element or setting the autoplay attribute to the element.

For example, we can create an autoplay video element and then log the play event when it’s fired. First, we make the HTML code by adding a videon element:

<video controls autoplay src='https://sample-videos.com/video123/mp4/240/big_buck_bunny_240p_30mb.mp4'></video>

Then in the JavaScript code, we define our own event handler function for the play event and set it to the onplay property of our video element DOM object:

const video = document.querySelector('video');video.onplay = (event) => {  
  console.log('video plays');  
};

When the video starts playing as the page loads, we should see the ‘video plays’ message logged in the console.log statement.

It should also log when we call the play method on the video element. If we have instead:

const video = document.querySelector('video');
video.play();
video.onplay = (event) => {  
  console.log('video plays');  
};

we should have the same message logged in the console. This is also the case if we play the video manually.

The pause event is fired when media playback has been paused. To handle this event, we can assign an event handler function to the onpause property a DOM element.

onwheel

onpause

onplay

Related Posts

By John Au-Yeung

Leave a Reply Cancel reply