A very useful topic that we have not gone in much depth is the inclusion of new HTML5 event attributes. We know that attributes are additional values that we can pass to HTML elements. The two kinds of attributes are Global and Event attributes. You are probably already familiar with Global values like class or ID. But what are Event Attributes? One of the traditional and most common Event Attribute is the onclick attribute (which performs a function or action when an element is clicked). Event Attributes are Script Values that are intended to trigger certain actions or functions.

Type of Event Attribute

There are five types of HTML Event Attributes: Window, Form, Keyboard,Mouse and Media.

Here is a brief overview of what each event is intended for:

  • Window – Events triggered for the window object (applies to the <body> tag).
  • Form – Events triggered by actions inside a HTML form (applies to almost all HTML elements, but is most used in form elements).
  • Keyboard – Events triggered by keys on the keyboard.
  • Mouse – Events triggered by a mouse, or similar user actions.
  • Media – Events triggered by medias like videos, images and audio (applies to all HTML elements, but is most common in media elements, like <audio>, <embed>, <img>, <object>, and <video>).

For a full listing of all HTML Event Attributes, Visit W3 Schools to learn more about each Event Attribute and their intended use.

Drag and Drop Function Using Mouse Event Attributes

To get some practice with some of the Event Attributes we are going to create one of the more popular features in HTML5, The Drag and Drop functionality. We will markup the HTML with the proper attributes, style it with some CSS and have the Event Attributes call certain Javascript functions in order for our Drag and Drop project to work. We will use these three Event Attributes:

  • ondrop – Script to be run when dragged element is being dropped.
  • ondragover – Script to be run when an element is being dragged over a valid drop target.
  • ondragstart – Script to be run at the start of a drag operation.

We will also need to use the draggable attribute to designate which object will be dragged and dropped. In this example, we will give the <img> the draggable attribute.

By using the Event Attributes, we can trigger certain functions (or actions to perform) once the events are activated. So the event ondrop will trigger the drop(event) function, the ondragover event will trigger the allowDrop(event), and so on. By only creating three functions we can override default element settings, copy the draggable object data and transfer it to another drop area.

Wrapping it Up

HTML event attributes make it easy to include triggers to activate functions or perform certain actions using javascript. Depending on how big your project is, you can also utilize Jquery UI to perform Drag and Drop functions as well and have Classes or IDs be the trigger for your javascript functions. If you would like a full listing of HTML5 Event attributes, visit W3 schools.

Download Source Files