Making things happen on a page when user’s interact with it is one of the most satisfying things about jQuery. User clicks on a thing? Boom! Page changes color. User moves their mouse? Boom! Everything fades out except one quote. The combinations are endless. Let’s see how to use events in jQuery to do awesome things with your selected elements and methods.
The jQuery .on()method is your key to working with events. You pass the event in question (for example‘click’) as a parameter to the.on method, followed by a second parameter containing what’s called a “handler” function. Within the function, you write your usual jQuery code that will be executed upon the event’s happening.
Using.on() creates what’s called an event listener, which means the code is waiting for the certain event to happen. JavaScript itself also features event listeners, which make JavaScript and jQuery the tools of choice for building user-interactive pages. jQuery just makes it way easier than pure JS!
Here’s a list of common events you might pass to the.on method, their functionalities easily discerned by their names:
.on('click', function() { … }
.on('scroll', function() { … }
.on('hover', function() { … }
.on('mouseover', function() { … }
.on('mouseenter', function() { … }
.on('mouse leave', function() { … }
.on('keydown', function() { … }
.on('keyup', function() { … }
.on('keypress', function() { … }
.on('focus', function() { … }
.on('blur', function() { … }
.on('resize', function() { … }Previously, jQuery had specific methods for each event instead of having you pass event names as parameters. You may see these methods in certain codebases; technically, you can still use them, but using.on() plus parameters is a better choice:
.click()
.scroll()
.hover()
.mouseover()
.mouseout()
.mouseenter()
.mouseleave()
.keydown()
.keyup()
.keypress()
.focus()
.blur()
.resize()Let’s compare the two in practice. For example, to provoke an alert when someone clicks on a paragraph element, you’d write:
$(‘p’).on(‘click’, function() {
alert( “Someone clicked on a paragraph!” )
});In shorthand, this would be:
$(“p”).click(function() {
alert( “Someone clicked on a paragraph!” )
});Using.on() reads much better from left to right and is the newer practice. This is the route you should take!
Event object
Sometimes you’ll need to have information about the event itself in order to accomplish what you need. For example, maybe you want the time to appear next to an element when the event occurs.
The event object has several property types. Of course, you have thetype property, which describe which type of event occurred. You also have the event’starget property (which element kicked off the event, such as‘click’),pageX andpageY (mouse positions from the left and top of what the user sees of the page),timeStamp (how many milliseconds it’s been since 1/1/1970, from which you can calculate exact dates and times), and more.
To interact with the event object in your function, you pass the event as a parameter therein. Let’s put this into practice. Write a paragraph in HTML that, when users click on it, turns into text that describes when they clicked.
1. Declare a variable that references all paragraphs
2. Pass the event as a parameter to the function
3. Create a date variable that grabs the event’s timestamp
4. Replace the paragraphs with the text, “You clicked on [date]”
var $p = $('p');
$p.on('click', function(event) {
var date = new Date(event.timeStamp);
$p.text("You clicked on: " + date)
});http://codepen.io/eclairereese/pen/GZOKer
A simple application, yes, but passing the event object can be very useful. If you have a bunch of items on a page, and you want users to move certain items to a different section (ex. a favorites list) by clicking on them, you’ll need to know the exact items they clicked. You could get this with thetarget property, which you’ll see in the next chapter’s example.
