HTML5 Development Class: Mouse Events

Introduction to HTML 5: Mouse Events

HTML5 is changing and expanding the landscape of web development. There are a multitude of new attributes and events that are being introduced with HTML5. In this installment we’ll take a look at the new and old events surrounding the mouse including movement, position and clicking as well as the new drag and drop events.

About Events

For those new to HTML, events are simply things that happen like moving the mouse, clicking the mouse or hovering the mouse pointer over an element. The event allows you, the developer, to perform an action when an event occurs. The action usually takes the form of some JavaScript. A practical example of using an event to perform an action would be changing an image when the user hovers over it. In that instance the hovering is the event that triggers the action of changing the image.

Keep in mind all of these events are tied to individual elements on your page. That means simply clicking the mouse on an empty area of your page does not fire any onclick event. A specific element on the page must be clicked in order for an onclick or other event to fire.

Mouse Events Unchanged

It can be argued that the mouse events in HTML4 are probably the most used events. Because of that widespread use and the fact they are incredibly intuitive they are unchanged from HTML4 to HTML5. However, the roles of some of these events will take on new meaning with the addition of new events like ondrag and ondrop.

• onclick – As its name suggests this event fires when the user clicks the mouse button once. This is a very useful event to handle everything from playing a simple sound on a click to a complex situation for loading a menu based on the location of the pointer when the user clicks.
• ondblclick – This event fires on a double click by the user. This event will not fire simultaneously with the onclick event. Depending on how rapidly the clicks register in succession determines whether the onclick or ondblclick event fires.
• onmousedown – This event fires when the mouse button is pressed. This event can be used for circumstances where you want to pause an action while the mouse is pressed or build a script that allows the user to move objects around the page. However, with the addition of the new HTML5 drag and drop events (covered later) this event’s role will likely change.
• onmouseup – This event fires when the mouse button is released and is usually used to end whatever action the onmousedown event started. Like its partner event onmousedown, the role of this event will also change with the addition of the new drag and drop events (covered later).
• onmouseover – With this event you can do all kinds of useful things like changing an image, opening up a menu or kick starting an animation. Of all the mouse related events this one and its partner event onmouseout are probably the most widely used.
• onmouseout – The opposite of onmouseover this event fires when the user moves off of an element. This is most commonly used to reset or end an action started in the onmouseover event.
• onmousemove  – Think of this as the event that happens between onmouseover and onmouseout. It fires repeatedly as the mouse pointer moves over an element. Though interesting in concept it is probably the least used of the HTML4 mouse events.

Mouse Events Expanded

In HTML5 events have been expanded to allow developers to add the dragging and dropping of objects to their repertoire. It also now includes an event triggered by scrolling. Lastly, there is a new event that allows developers to incorporate the actions of the mouse wheel.

• ondrag – This event fires when a draggable element makes it journey around the page. Like onmousemove it fires as the element is moving. It’s most useful application is to change the element’s look as it moves but has other possibilities as well.
• ondragend – This event fires at the very end of the dragging process. Its purpose is basically clean up. For example, if the element was dropped into a valid drop target you may want to do something like remove a list item from an ordered list but if it is dropped into a blank spot on the page you may want to do something else entirely.
• ondragenter – This event fires when an element enters a valid drop target. This event is best used to change the look of the dragging element to provide a visual queue to the user that they have found a valid location to drop their element.
• ondragleave – This event is the clean up partner for ondragenter. For example, if you add a drop icon to the element in the ondragenter event you can then remove it in this event.
• ondragover – Like the onmouseover event you can use this event to perform an action when a draggable element moves over a drop target. While you might think this is basically the same as the ondragenter event, the ondragover fires as the user moves the draggable element around the drop target area. Like its onmousemove cousin this event is likely to be the least used drag and drop event.
• ondrop – This event fires when the user releases the draggable element, i.e. drops the element. This event is usually where developers script decisions on how to handle the final disposition of the draggable element and do some clean up from the drag and drop.
• onmousewheel – This event is intended to fire when the user moves the mouse wheel. While this will undoubtedly be a handy tool for developers the details on how to practically use this event are still sketchy. Since the HTML5 draft is still being continually modified its not even a certainty this event will be permanent, although I hope it will be.
• onscroll – This event fires when a user moves the scrollbar on an element. Since HTML5 has many more elements than HTML4 that contain a scrollbar this could potentially be a very useful event.

Note:  The drag and drop events are a little different than the typical mouse events. When using the new drag and drop features of HTML5 you will have elements that you set as draggable as well as drop targets. The draggable elements will have specific events that pertain to them such as ondrag while the drop targets have other events particular to their role like the ondrop event. Drag events also typically use handlers which are basically just JavaScript functions designed to handle specific drag and drop functionality no matter what element triggers the event.

Conclusion

The new mouse events offered in HTML5 will eventually greatly expand the user experience. On the development side it will make rich user interfaces easier to implement and truly cross-browser compatible. The good news is that most of the new mouse events have already been implemented in most of the popular modern browsers. The bad news is that the implementation is still a work in progress and behavior is not identical across all browsers. There are subtle differences, especially when it comes to dragging and dropping.

Take a look at this great HTML5 drag and drop example in different browsers and see if you can spot the differences. Happy coding!