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 returnstrueif 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 returnstrueif the control key was down when the mouse event was fired.metaKey— a boolean read-only that returnstrueif 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 nodeoffsetY— a read-only property that has the Y coordinate of the mouse pointer relative to the position of the padding edge of the target nodepageX— 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,nullis 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 returnstrueif 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 between0.0(minimum pressure) and1.0(maximum pressure). This is a deprecated (and non-standard) property. We should instead use thePointerEventobject’spressureproperty.mozInputSource— a read-only property that has the type of device that generated the event (one of theMOZ_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 clickingx— a read-only property that is an alias forclientX.y— a read-only property that is an alias forclientY.
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.
