JavaScript Events Handlers — onfullscreenerror and onpaste
Tags: javascript, tutorial, webdev, beginners
Published: 2020-01-31 02:28:34

**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:

```javascript
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:

```javascript
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:

```javascript
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.