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 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 look at the ondblclick and ondrag event handlers and how to use them.

ondblclick

The ondblclick property of an HTML element let us assign an event handler function to handle the dblclick event, which is triggered when a user double clicks on an element. It fires after both clicks are completed. For example, we can use it to log the position where the double click was done. We first add the HTML code to display the position like in the following code:

<p id='dblclick-log'></p>

Then we add the JavaScript code with the event handler function assigned to the document.ondblclick property like we have in the code below:

const dblclickLog = document.getElementById('dblclick-log');

document.ondblclick = (e) => {  
  dblclickLog.textContent = `Double clicked on: (${e.clientX}, ${e.clientY})`;  
}

The e parameter above is a MouseEvent which has the following properties:

• 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 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.

Knowing that we can also track things like double-clicking with the Alt key down or double-clicking with the Windows key down. First, we add the following HTML code to display the results:

<p id='dblclick-log'></p>  
<p id='alt-pressed'></p>  
<p id='meta-pressed'></p>

Then in the JavaScript code, we add:

const dblclickLog = document.getElementById('dblclick-log');  
const altPressed = document.getElementById('alt-pressed');  
const metaPressed = document.getElementById('meta-pressed');

document.ondblclick = (e) => {  
  dblclickLog.textContent = `Double clicked on: (${e.clientX}, ${e.clientY})`;  
  altPressed.textContent = e.altKey ? 'Alt key pressed' : '';  
  metaPressed.textContent = e.metaKey ? 'Windows key pressed' : '';  
}

Then we can track whether the Alt or Windows key was down when we’re double clicking.

ondrag

The ondrag property lets us assign an event handler function that we define to handle the drag event, which is fired when an element that has the draggable attribute value set to true is being dragged on the browser screen. For example, we write the following HTML code to make an HTML box:

<div id='drag-box' draggable="true"></div>

Then we style it with CSS by making 100 pixels wide and 100 pixels tall and fill it with a red background:

#drag-box {  
  width: 100px;  
  height: 100px;  
  background-color: red;  
}

Finally, we can add the JavaScript code to track the dragging action of the box by assigning an event handler function to the ondrag property of the DOM element of our box that we created in the HTML code:

const dragBox = document.getElementById('drag-box');
dragBox.ondrag = (e) => {  
  console.log(e);  
}

Then when we start dragging, we should get the following output from the console.log when we drag the box:

altKey: false  
bubbles: true  
button: 0  
buttons: 1  
cancelBubble: false  
cancelable: true  
clientX: 90  
clientY: 68  
composed: true  
ctrlKey: false  
currentTarget: null  
dataTransfer: DataTransfer {dropEffect: "none", effectAllowed: "uninitialized", items: DataTransferItemList, types: Array(0), files: FileList}  
defaultPrevented: false  
detail: 0  
eventPhase: 0  
fromElement: null  
isTrusted: true  
layerX: 90  
layerY: 68  
metaKey: false  
movementX: 0  
movementY: 0  
offsetX: 82  
offsetY: 60  
pageX: 90  
pageY: 68  
path: (5) [div#drag-box, body, html, document, Window]  
relatedTarget: null  
returnValue: true  
screenX: 2250  
screenY: 520  
shiftKey: false  
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}  
srcElement: div#drag-box  
target: div#drag-box  
timeStamp: 5233.220000285655  
toElement: div#drag-box  
type: "drag"  
view: Window {parent: global, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}  
which: 1  
x: 90  
y: 68

The properties are the same ones that are from the MouseEvent and Event objects since the DragEvent object that we get from the parameter of the event handler function inherit from both. We can get the drag coordinate with x and y properties logged above.

The ondblclick property of an HTML element let us assign an event handler function to handle the dblclick event, which is triggered when a user double clicks on an element. We get a MouseEvent in the parameter of the event handler function so that we can use its properties to our liking. The ondrag property lets us assign an event handler function that we define to handle the drag event, which is fired when an element that has the draggable attribute value set to true is being dragged on the browser screen. We can get the drag coordinate with x and y properties from the DragEvent object.