Instructobit
Using jQuery we can run pieces of code when certain events happen for specific elements. This can be done using HTML event attributes, but sometimes it is necessary or more effective to assign event handlers in Javascript.
Creating a basic event handler with jQuery
There are two similar ways to create an event handler in jQuery. For both methods we must first select one or more elements using a jQuery selector. We can then either use the on() method combined with a string that specifies the type(s) of event we want to use (eg. "click"), or we can use a method for a specific event type such as click(). Generally using a specific function is more common as the on() function's main use is to listen for several event types at once.
HTML:
<div>
<button id="button1">Test</button>
<button id="button2">Test</button>
<button id="button3">Test</button>
</div>
Javascript:
$( "#button1" ).click( function(){
alert( "you clicked button 1" );
});
$( "#button2" ).on( "click", function(){
alert( "you clicked button 2" );
});
$( "#button3" ).on( "mouseenter mouseleave", function(){
alert( "your mouse entered or left button 3" );
});
You can also add one event handler to multiple elements at the same time
$( "button" ).click( function(){
alert( "you clicked a button" );
});
Some event types such as keypress or click have a default behavior such as typing a character or focusing on an element, sometimes it can be very useful to stop this default behavior and substitute it with an alternative function. To do this we will need to add an event parameter to our function which will be populated with the event object, we can then call the preventDefault() method which will stop the default behavior.
HTML:
<textarea></textarea>
Javascript:
$( "textarea" ).keypress( function( event ){
event.preventDefault();
});
The above code will stop the user from being able to type in a text area by preventing the "keypress" default behavior of adding a character to an editable element.
Getting the element that triggered the event
When selecting multiple objects it is sometimes necessary to use the specific element that triggered the event. An event handler will create a variable "this" which contains the element that triggered the event, to convert the element to a jQuery object we can surround it with "$()". We can also use the event object to retrieve the element using event.target.
HTML:
<div>
<button id="button1">Test</button>
<button id="button2">Test</button>
<button id="button3">Test</button>
</div>
Javascript:
$( "button" ).click( function( event ){
$( this ).css( "background", "red" ); // changes the background of only the button that was clicked
$( event.target ).css( "background", "red" ); // accomplished the above, but uses event.target instead of this
});
The event object has a quite a number of properties and methods that can be accessed and used.
event.stopPropagation()
This method can be used when one element with an event handler is the child of another event with an event handler to stop the parent's event handler from being activated when the child's one is activated.
HTML:
<div>
<button>Test</button>
</div>
Javascript
$( "div" ).click( function(){
alert( "you clicked the div" );
});
$( "button" ).click( function( event ){
event.stopPropagation();
alert( "you clicked the button" );
});
The above code will ensure that when you click the button, the div's event handler will not activate. Without this method, both of the above handlers would activate when pressing the button.
event properties
Depending on the event type, there are a few useful properties of the event object that can be accessed and used. Here is a short list of some of the most common ones:
For all events:
-
event.target
returns the element that triggered the event
-
event.type
returns the type of the event
-
event.altKey
returns true or false depending on whether "alt" was pressed down at the time of the event.
-
event.shiftKey
returns true or false depending on whether "shift" was pressed down at the time of the event.
-
event.ctrlKey
returns true or false depending on whether "ctrl" was pressed down at the time of the event.
For mouse events:
-
event.clientX
returns the x position of the mouse at the time of the event, relative to the client document
-
event.clientY
returns the y position of the mouse at the time of the event, relative to the client document
-
event.button
returns which mouse button was used
For keyboard events:
-
event.which
or
event.keyCode
returns the character code of the pressed key (use this to find out which key has been pressed)
