Categories
JavaScript

JavaScript Events Handlers — oncontextmenu and oncuechange

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. We will take a close look at the oncontextmenu and oncuechange event handlers.

oncontextmenu

The oncontextmenu property lets us assign an event handler function to it to handle the contextmenu event. The event is triggered when the right mouse button is clicked on the browser tab. The browser context menu will activate unless the default behavior is prevented. For example, we can disable right click by writing:

document.oncontextmenu = (event) => {  
  event.preventDefault();  
}

We can also get the position of the right-click by using the cilentX and cilentY properties of the MouseEvent object, which is the object that we from the parameter of the event handler function. For example, we can write the following HTML code to put the text of the right click position:

<p id='pos'></p>

Then we can write the following JavaScript code to get the coordinates of the right click and then set the text to display in the p element we wrote above with the cilentX and cilentY properties from the MouseEvent object that’s passed in the parameter when the event handler function is called:

const pos = document.getElementById('pos');  
document.oncontextmenu = (e) => {  
  console.log(e);  
  pos.innerHTML = `You right clicked on (${e.clientX}, ${e.clientY})`;  
}

The MouseEvent object has many properties. They are the following:

  • altKey — a boolean read-only property that returns true if the Qlt key was down when the mouse event was fired.
  • button — a read-only property that indicates the button number that was pressed (if applicable) when the mouse event was fired.
  • buttons — a read-only property that has the buttons being depressed (if any) when the mouse event was fired.
  • clientX — a read-only property that has the X coordinate of the mouse pointer in the document coordinates.
  • clientY — a read-only property that has the Y coordinate of the mouse pointer in the local document coordinates.
  • ctrlKey — a boolean read-only that returns true if the control key was down when the mouse event was fired.
  • metaKey — a boolean read-only that returns true if the meta key was down when the mouse event was fired. The meta key is the command or Apple key on Macintosh keyboards and the Windows key on Windows keyboards.
  • movementX — a read-only that has the X coordinate of the mouse pointer relative to the position of the last mousemove event.
  • movementY — a read-only property that has the Y coordinate of the mouse pointer relative to the position of the last mousemove event.
  • offsetX — a read-only property that has the X coordinate of the mouse pointer relative to the position of the padding edge of the target node
  • offsetY — a read-only property that has the Y coordinate of the mouse pointer relative to the position of the padding edge of the target node
  • pageX — a read-only property that has the X coordinate of the mouse pointer relative to the whole document.
  • pageY — a read-only property the Y coordinate of the mouse pointer relative to the whole document.
  • region — a read-only property that returns the ID of the hit region affected by the event. If no hit region is affected, null is returned.
  • relatedTarget — a read-only property that has the secondary target for the event, if there is one.
  • screenX — a read-only property that has the X coordinate of the mouse pointer in global (screen) coordinates.
  • screenY — a read-only property that has the Y coordinate of the mouse pointer in global (screen) coordinates.
  • shiftKey — a boolean read-only property that returns true if the shift key was down when the mouse event was fired.
  • which — a read-only that has the button being pressed when the mouse event was fired.
  • mozPressure — a read-only that has the amount of pressure applied to a touch or tablet device when generating the event. This value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure). This is a deprecated (and non-standard) property. We should instead use the PointerEvent object’s pressure property.
  • mozInputSource — a read-only property that has the type of device that generated the event (one of the MOZ_SOURCE_* constants listed below). We can determine whether a mouse event was generated by an actual mouse or by a touch event, or detect other input sources the user is interacting with with this property.
  • webkitForce — a read-only property that has the amount of pressure applied when clicking
  • x — a read-only property that is an alias for clientX.
  • y — a read-only property that is an alias for clientY.

oncuechange

The oncuechange property let us assign an event handler to handle the cuechange event, which is fired when a TextTrack has changed the currently displaying cues. This event is sent to both the TextTrack and track element the track is presented by. For instance, we can use it for logging the caption that’s being displayed in a video like in the following code. First, we add the HTML code for the video and the caption track for the video:

<!DOCTYPE html>  
<html>  
  <head>  
    <title>Cue Change</title>  
    <link href="main.css" rel="stylesheet" />  
  </head>  
  <body>  
    <video controls width="250" src="./media/friday.mp4">  
      <track  
        default  
        kind="captions"  
        srclang="en"  
        src="./media/friday.vtt"  
        id="video-track"  
      />Sorry, your browser doesn't support embedded videos.  
    </video><script src="main.js"></script>  
  </body>  
</html>

Then in main.js , we add the following JavaScript code:

const videoTrack = document.getElementById("video-track");  
videoTrack.oncuechange = e => {  
  console.log(e);  
};

From the console.log output of the code above, we should get something like the following:

bubbles: false  
cancelBubble: false  
cancelable: false  
composed: false  
currentTarget: null  
defaultPrevented: false  
eventPhase: 0  
isTrusted: true  
path: (6) \[track#video-track, video, body, html, document, Window\]  
returnValue: true  
srcElement: track#video-track  
target: track#video-track  
timeStamp: 11405.27500025928  
type: "cuechange"

New console.log output should appear as new caption is being displayed which is the same as the cues being changed and when the cuechanged event is fired. We can get the caption / cue text from the target.track.activeCues property. The activeCues property is a TextTrackCueList , which is an array like object, so we can iterate through it with the for...of and use the spread operator with it. For example, we can write the following code:

const videoTrack = document.getElementById("video-track");  
videoTrack.oncuechange = e => {  
  console.log([...e.target.track.activeCues].map(t => t.text).join(" "));  
};

Then we would get the lines of the caption track for the video above:

Hildy!  
How are you?  
Tell me, is the lord of the universe in?  
Yes, he's in - in a bad humor  
Somebody must've stolen the crown jewels  
...

The console.log output lines go on until the end of the video.

The oncontextmenu property lets us assign an event handler function to it to handle the contextmenu event. The event is triggered when the right mouse button is clicked on the browser tab. It’s handy for detecting right-click events and disabling right-click on pages. The oncuechange property let us assign an event handler to handle the cuechange event, which is fired when a TextTrack has changed the currently displaying cues. This event is sent to both the TextTrack and track element the track is presented by. We can get the track data with the event.target.track property, which available to Event objects passed into the oncurchange event handler.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.