JavaScript Events Handlers — onfullscreenerror and onpaste

#javascript #tutorial #webdev #beginners

Subscribe to my email list now at http://jauyeung.net/subscribe/

Follow me on Twitter at https://twitter.com/AuMayeung

Many more articles at https://medium.com/@hohanga

Even more articles at http://thewebdev.info/

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. In this article, we will look at the the onfullscreenerror and the onpaste event handlers.

window.document.onfullscreenerror

The onfullscreenerror property lets us assign an event handler that handles the fullscreenerror event. If the attempt to call the requestFullScreen method fails, then the fullscreenerror is fired and the onfullscreenerror event handler is run. For example, if we have the following code:

document.documentElement.requestFullscreen();document.onfullscreenerror = event => {  
  console.log("onfullscreenerror");  
  console.log(event);  
};

Then the onfullscreenerror handler will be run since the fullscreenerror event is fired. It’s fired because requestFullScreen only works on elements where the user is interacting with it. It can’t happen automatically for security reasons, so it will fail. The error event looks something like the following:

bubbles: true
cancelBubble: false
cancelable: false
composed: true
currentTarget: null
defaultPrevented: false
eventPhase: 0
isTrusted: true
path: (3) [html, document, Window]
returnValue: true
srcElement: html
target: html
timeStamp: 144.4549998268485
type: "fullscreenerror"

These are the properties that are part of the Event object. An Event object has the following value properties many of which are the ones that are listed above:

bubbles — is a read-only boolean property that indicates whether the event bubbles up through the DOM tree or not.
cancelBubble — is a historical alias to the stopPropagation method. Setting its value to true before returning from an event handler prevents propagation of the event.
cancelable — is a read-only boolean property indicating whether the event can be cancelled.
composed — is a read-only boolean property that indicates whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.
currentTarget — is a read-only property that references currently registered target for the event. This is the object to which the event is currently slated to be sent to, but it’s possible that this has been changed along the way through retargeting.
deepPath — is an array of DOM Nodes through which the event has bubbled.
defaultPrevented — is a read-only boolean property that indicates whether or not event.preventDefault() has been called on the event.
eventPhase — is a read only property that indicates which phase of the event flow is being processed.
explicitOriginalTarget — is a read-only property that has an explicit original target of the event. This property is only available in Mozilla browsers.
originalTarget — is a read-only property that has the original target of the event, before any retargetings. This property is only available in Mozilla browsers.
returnValue — is a historical property introduced by Internet Explorer and eventually adopted into the DOM specification in order to ensure existing sites continue to work. Ideally, you should try to use preventDefault() and defaultPrevented instead for cancelling events and checking if events are cancelled, but you can use returnValue if you choose to do so.
srcElement — is anon-standard alias from old versions of Microsoft Internet Explorer for target, which is starting to be supported in some other browsers for web compatibility purposes.
target — is a read-only property that is a reference to the target to which the event was originally dispatched.
timeStamp — is a read-only that has the time at which the event was created (in milliseconds). By specification, this value is the time since January 1, 1970, but in reality browsers’ definitions vary.
type — is a read only property that has the name of the event (case-insensitive).
isTrusted — is a read only property that indicates whether or not the event was initiated by the browser after user interaction or by a script using an event creation method like initEvent.

The list above is a partial of properties. It only contains the value properties of the Event object.

window.document.onpaste

The onpaste property lets us assign an event handler to handle the paste event, which is triggered when we paste in data from the clipboard into our web page. For example, we can use it as in the following code:

document.onpaste = event => {  
  console.log(event);  
}

We can get the clipboard data that we pasted in our app with the clipboardData property, which is a DataTransfer object that has the getData method. A DataTransfer object has the following value properties:

dropEffect — returns a string of the type of drag-and-drop operation currently selected or sets the operation to a new type. The possible values are none, copy, link or move.
effectAllowed — returns a string of the type of operations that are possible. The possible value is one of none, copy, copyLink, copyMove, link, linkMove, move, all or uninitialized.
files — an FileList object of all the local files available on the data transfer. If the drag operation doesn't involve dragging files, this property is an empty list.
items — is a read-only gives a DataTransferItemList object which is a list of all of the drag data.
types — is a read-only property that has an array of strings giving the formats that were set in the dragstart event

The DataTransfer object that has the following methods:

clearData() -remove the data associated with a given type. The type argument is optional. If the type is empty or not specified, the data associated with all types is removed. If data for the specified type does not exist or the data transfer object has no data then this method does nothing. It takes one optional argument, which is a string with the type of data to clear.
getData() — retrieves the data for the string of type that’s passed in as the argument, or an empty string if data for that type does not exist or the data transfer contains no data. It takes one argument which is the string with the type of the data to retrieve.
setData() — set the data for a given type. It takes 2 arguments. The first is a string for the format of the data that’s dragged and the second argument is the string that has the data for the drag object. If data for the type does not exist then it’s added at the end and it will be the new format. If data for the type already exists, the existing data is replaced in the same position.
setDragImage() — set the image to be used for dragging if a custom one is desired. It takes 3 arguments. The first is an image Element object that’s used for the drag feedback image. The second and third arguments are the horizontal and vertical offsets within the image.

To get the pasted text data we can use the getData method with the 'Text' argument like in the following code:

document.onpaste = event => {  
  console.log(event);  
  console.log(event.clipboardData.getData('Text'));  
}

Then we should get the text data that was pasted to our page.

The onfullscreenerror event handler let us handle any occasion where switching to full screen fails, like attempting to switch to full screen automatically without user interaction like trying to call requestFullScreen on the documentElement object. We can use the onpaste event handler to handle paste events triggered by pasting data from the clipboard to our page and get the data by using the event.clipboardData.getData(‘Text’) method call.