|jQuery 3 - Using Events|
|Written by Ian Elliot|
|Monday, 01 May 2017|
Page 1 of 4
jQuery provides both a general framework for handling events and event-specific functions. While you can use the general functions - on, off and one - to deal with all events, the event-specific functions do focus the mind on how events are used and are worth knowing about.
Now Available as a Print Book:
You can buy it from:
The Core UI
Now Available as a Print Book:
You can buy it from:
Events, Async & AJAX
There are five categories of event:
Keep in mind that all of these functions are equivalent to using on with the name of the event. This means that events that are attached using these functions can be manipulated as if they had been added using on. For example they can be removed using off.
Mouse events are the ones we use most. The first example of an event most people are introduced to is the mouse click event. However the mouse can be a difficult input device to get right.
The most basic mouse event is the click and you can attach a handler to any element using:
where eventdata is optional and is an object that is passed to the handler when it is fired. You can also fire the click event on an element by using
i.e. with no parameters.
All of the specific event functions work in the same way - only the name of the event and function changes.
We are so familiar with the click event that we often don't bother to find out exactly what a click is. To register a click the left mouse button has to to be pressed down and released while the mouse pointer is inside the element that registers the click. What this means is that you can abort a click by moving outside of the element before you release the button.
There are lower level mouse event handlers mousedown and mouseup which are fired when a mouse button is pressed and when released respectively. A mousedown and a mouseup event occur before a click event.
A click event handler will be called when a user taps on a touch device and so it is fairly safe to use.
There is also the double click event and dblclick function that can be used to attach a handler in much the same way:
In this case the surprise might be that you can double-click a button. It may be allowed but it isn't used very often. In fact as the double click generally means "open me" or "run me" it tends to only be used on elements that can be opened or run.
A double click is slightly more complicated than a click because there is a system specific delay between clicks. The double click event is fired when the user clicks twice on an element within a given time. As for a click the pointer has to remain inside the element the entire time.
Double clicks are best avoided if you want your program to work on a mobile device. The reason is that there is no direct equivalent to the double click. A single tap may be treated as a click but a double tap is not and in fact double tapping is a very rare gesture on a touch-enabled app. If you really must have a double click working on a mobile device then you will need to write something at a lower level and this is difficult to get working across devices.
Another problem is that browsers differ in the way they handle click and double click handlers bound to the same device - some fire two click events before the double click and some just one.
Finally notice that click and double click only work with the mouse's primary button - usually the left button. Some browsers did fire a click event for other buttons but this is not now standard behaviour.
If click and double click is only for the primary button what about the middle/scroll wheel and the right button?
The right button is associated with the context menu and so its event is called contextmenu.
The event will only fire if the button is right clicked. The event handler will be called but when it has finished the context menu will be displayed. To suppress the context menu you need to add a call to preventDefault:
Long touch events are generally translated to right clicks, i.e. the display the context menu in a mobile device. For this reason using right click is relatively safe.
mouseup and mousedown
The middle button or scroll wheel doesn't have a special event handler in jQuery and only recently has there been a standard for its use. If you want to work with the scroll button then look up the "wheel" event.
If you want to respond to left, middle and right clicks then you have no choice but to program your own. The lower level events mousedown and mouseup are fired when any mouse button is used and you can discover which button was pressed using the which property of the event object, which is 1 for the left button, 2 for the middle button and 3 for the right button.
in this case you will see 1,2 or 3 displayed depending on which button you press.
You can use mousedown and mouseup to synthesise a click event on any button, however it isn't quite as easy as you might think. If you want to make a proper click event then you have to make sure that the mouseup happens on the same element that the mousedown occurred on. One way of doing this is:
What is happening here is that when the mousedown event occurs the element that it occurred on is stored in the the local variable target. Then the function sets a mouseup event handler on the document. Any mouseup event that occurs will bubble up to the top level document and we can check using target, which is available to the handler due to closure, that the event did occur on the same element.
To use this click function all you have to do is:
Notice that the actual event handler, i.e. the code that does something useful, is defined on the mouseup handler.
Mouse Location Events
A set of events is provided to let you respond to a mouse's location. Notice that none of these events have good equivalent gestures on a mobile or touch device and hence they are best avoided.
mouseenter and mouseleave
Are triggered when the mouse pointer enters and leaves an element respectively. This event doesn't bubble so the mouse entering and leaving a child element does not fire the event on the element containing the child.
mouseover and mouseout
Are triggered when the mouse pointer enters and leaves an element respectively. They are bubbling versions of mouseenter and mouseleave. This means that the events will be fired if the mouse pointer enters or leaves a child element of the element the handler is bound to.
To see the difference use something like:
You will see the event triggered if the mouse moves over the inner or outer div. If you change mouseover to mouseenter you will only see the event when the mouse moves over the inner element.
Hover will bind one or two handlers to the mouseenter and mouseleave events. If you specify two functions then the first is bound to mouseenter and the second to mouseleave. If you specify a single function then it is bound to both events.
This event is fired every time the mouse moves within the element the handler is bound to. You can obtain the mouse's position from the pageX and pageY properties of the event object. These give the position relative to the top left-hand corner of the page. The only problem with using this event is that it is fired every time the mouse moves and this can be a performance issue. Any event handler you bind to it should finish as quickly as possible.
As an example of mousemove, let's implement a "scribble" application. In this case all we have to do is draw a dot at the current mouse position as it moves. To do this we can use a canvas element:
The program is:
If you try this out you should be able to drawn on the page
If you change mousemove to mousedown then you will only be able to draw at each mousedown event.
|Last Updated ( Monday, 03 September 2018 )|