Made withjQueryClip

JavaScript & jQuery Tutorial for Beginners - 3 of 9 - jQuery Events

T

tutor4u

Creator on the jQuery channel

Watch on YouTube ↗

134K viewsAug 26, 20129:27 runtime

Learn the fundamentals of handling user interactions in JavaScript using jQuery events. This tutorial demonstrates how to respond to user actions by binding event handlers to HTML elements. You'll see practical examples of common mouse events like `click`, `mousedown`…

Chapters

#jquery#clip#frontend

Handling User Interactions with jQuery Events

jQuery simplifies the process of responding to user actions on a web page, such as mouse clicks or movements.

Basic Event Binding

To execute code when an event occurs, you bind an event handler to one or more elements using a selector. The handler is typically an anonymous function.

// General Syntax
$('selector').eventName(function() {
  // Code to run when the event happens
});

Example: Handling a click event

$('h1').click(function() {
  // This code runs when any H1 element is clicked.
});

Note
The .click() event fires after the user presses and releases the mouse button over the element.

Targeting the Specific Element with `this`

Inside an event handler function, the this keyword refers to the specific DOM element that triggered the event. To use jQuery methods on it, you must wrap it with $().

$('h1').click(function() {
  // Change the background color of ONLY the H1 that was clicked.
  $(this).css('background-color', 'red');
});

Common Mouse Events

jQuery supports a wide range of mouse events demonstrated in the video:

click: The user presses and releases the mouse button.
mousedown: The user presses the mouse button down. The event fires immediately, without waiting for the release.
mouseup: The user releases the mouse button.
mouseenter: The mouse pointer moves over an element.
mouseleave: The mouse pointer moves away from an element.

Removing Event Handlers with `.unbind()`

You can dynamically remove event handlers from elements using the .unbind() method. This is useful for creating interactions that should only happen once.

Remove all events from an element:

// Inside a mouseleave handler, this removes all events from the element just left.
$(this).unbind();

Remove all events from ALL elements:

// Using the universal selector '*'
$('*').unbind();

Remove only a specific type of event:

// Removes only the 'mouseleave' event from all elements.
$('*').unbind('mouseleave');

Important
When using unbind(), you can make interactions permanent. For example, after an element's event fires once, you can unbind that event so it doesn't respond to further user actions.

Binding a `click` Event with an Anonymous Function

In this video I'll be covering jQuery events. We can use events to specify what to do when certain events happen. For example, we might want to respond when a user clicks their mouse button on a particular element.

This is the HTML document that we'll be using. It has three H1 heading tags specified. So now let's go add some code that will change the background color of a heading tag if someone clicks on it.

So we first use a selector to specify the H1 tag. And if you recall for a selector, we use a dollar sign followed by a pair of parentheses, and then we enclose our selector within quotes. And so here we're going to specify the H1 tag.

And then we can specify a click event by following this with a dot and the word click. And then we follow the word click with a pair of parentheses, and then we can add a semicolon because this is the end of our statement.

So this word click here specifies that we want to respond to a user that clicks their mouse button on an H1 heading element. So the user must press and release the mouse button while over the heading element. This event actually happens when the user mouse button is released.

So how do we specify what to do when the user clicks on a heading element? We can add something called an anonymous function. This goes between this pair of parentheses. So just type the word function followed by another pair of parentheses and a space, and then follow this with a pair of curly brackets. And everything that we want to happen when the user clicks on a heading element goes between these two curly brackets.

So put your cursor right here between these two brackets and press the enter key a couple of times to make yourself some room to work.

Using the `this` Keyword to Target an Element

So now any code that I put in this area right here will be run whenever a user clicks on an H1 heading element. So I'm just going to paste some code in here right now. So this code that I added right here will change the background color of the H1 element that is clicked. But don't pay too much attention to this section right here for now because we'll be covering this in a later video.

And notice here that the selector that we're using is the word this. And if you recall, the keyword this is not surrounded with quotation marks because it's a keyword instead of a string. And the word this refers to the element that brought us here. So if the user clicks on the second heading element for example, then the keyword this refers to the second heading element.

So let's give this a try. So I'll click on the second heading element and the background color for this one changes. Then if I click on the first one, same thing happens. And then I'll click on the third one and the same thing happens there too.

Exploring `mousedown` and `mouseup` Events

So let's try out another event. So instead of the word click, type in mousedown. The mousedown event happens when the user presses the mouse button, but they do not have to release it. So let's try this one out. So here on heading two, I'm going to press and hold the mouse button and now when I release the mouse button nothing happens. And so I can do the same with these other heading tags as well.

So now let's come over here and copy these three lines and then paste them right below it. And let's change the mousedown event to a mouseup event. So this mouseup event will happen whenever the user releases the mouse button while they're over an H1 tag. And then let's also change the background color of this mouseup event to yellow. So now when the user presses down the mouse button the background color will change to red, and when the user releases the mouse button the background color will change to yellow. So let's try this one out.

The `mouseenter` and `mouseleave` Events

So I'll press and hold the mouse button on this bottom heading and it turns to red, and now I'll release the mouse button and it turns to yellow. And I can do the same thing on these other two.

And now let's change this mousedown event to mouseenter and we'll change the mouseup event to mouseleave. The mouseenter event will happen whenever the mouse pointer is moved over the H1 tag, and the mouseleave event will happen whenever the user moves the mouse away from this tag.

So let's try this out. So now if I move my mouse over this heading one tag it'll turn to red and then when I move my mouse off of it it turns to yellow. And if I just move my mouse down the same thing will happen to these other two.

Removing Events from an Element with `unbind()`

So let's say now that we've added an event like mouseleave to the H1 element, but then we later want to remove it. We can do this by using a method called unbind, and so I'll show you how this works.

Let's add another line of code right here and we're going to specify a selector, and we're going to use this again. And then we type unbind, and then we follow this by parentheses and a semicolon to end this statement.

So now when a user moves this mouse over an H1 element, this code will be run which sets the background color to red. But then when the user moves the mouse away from this element, we'll first turn the background to yellow, and then we'll use the unbind method and that will remove all events from the element that the mouse was just moved away from.

So let's take a look at this. So here if I move my mouse onto this first heading, the background will change to red, and then when I move it off the background will change to yellow, but it's also removed all of the events for this first heading tag. So if I move my mouse back over this again, nothing happens. And so I can do the same with heading two and heading three. And so now that I've removed my mouse off of all three of these, the events for all of the heading tags have been removed and now nothing happens when I move my mouse over the top of these.

Unbinding Events from All Elements

And so now let's come back over here. Let's change this selector to the asterisk so that we can select everything. So we need to put the asterisk inside of quotation marks. And so now when a user moves their mouse over an H1 element the background will turn to red just like before. Then when the user moves the mouse off of the element, the background will turn to yellow, but then the events for all of the elements will be removed by using unbind.

So let's try this out. So I'll move my mouse over the first heading, it turns to red, then I move my mouse off of it and it changes to a yellow background. But now when I move my mouse over these other elements, nothing happens because I've removed all of the events.

Selectively Unbinding a Specific Event

So now let's say that I still want to remove events from all of the elements, but I only want to remove the mouse leave events. I can do that by coming over to the unbind method and within the parentheses here I'll type a couple of quotation marks, and then I just type mouseleave. And now this statement will remove all of the mouse leave events from all elements, but it will not affect the mouse enter events.

So let's go try this one out. So my mouse moves over the first heading, it turns to red. And then I move off of the first one and it turns to yellow, but then after it turns yellow all of the mouseleave events should be disconnected from all of the heading elements. So now if I move the mouse over this heading element, the mouseenter event still works, but when I move my mouse off of it it no longer turns to yellow because the mouseleave event has been removed. And then you can see that again as I move the mouse over this third heading.

Well there are other events that were not covered in this video, but you can go to jquery.com to learn more. Well that concludes this video. You can find the sample code used in this video at littlewebhut.com. Thanks for watching and please subscribe and leave a comment.