Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The last series of event functions we are going to cover for jQuery are some miscellaneous event functions. And these are basically provided by jQuery to handle a couple of specialized tasks. Those functions are the one() function, and trigger(), and triggerHandler(). The one() function pretty much works the same as bind(). However, the event handler is only ever going to be executed once for each one of the matched elements that the event is bound to. And you call this function when you only want an event handler to happen once.
So, the event will be bound, and then once the event gets triggered, it will not be responded to again. The other two functions, trigger() and triggerHandler(), are ways of essentially triggering events from within code without having to wait for the user. The difference here is that the trigger () function will trigger an event on each one of the matched elements that come back from this selector. And it will also cause the browser to act as though the user caused the event to happen.
So, for example if you trigger the click event on a link, then not only will the event fire off from within your code, but the browser will act as though the item were clicked on. Now, triggerHandler() is similar. It does the same thing. It triggers the event handlers but it does it without having the browser go off, and act as though the event actually happened. This only works on the first matched element in the result set for a selector. So, what we're going to do now is take a look at some examples of how we might use this.
We're not going to use the trigger() or triggerHandler(). Those are pretty esoteric. So, let's take a look at how the one() event handler works. Let's jump over to the code. So, here's the source code. Just take a look at the Design really quick. So what I have here is a series of divs, and each one has a color and a border. What we're going to do is write some code that binds event handlers to these divs that only fire once. So, let's go back to the Source. So, you can see that for each one of these divs, I've defined a style sheet.
And among other things it defines things like width and height and you can see that there is a cursor property here in the style sheet that's set to a pointer indicating it could be clicked on. So, what we're going to do is create an event handler that only fires the click() function once. So, let's go up here where I've got my jQuery library included. So, I'm going to write my onload handler. So, I will write function, and when the document loads, what we're going to do is get a reference to all these divs, and instead of using the bind() function we're going to use one().
What we're going to do is bind an event for click. And we'll have a function that gets called. So, inside this function we're going to set on the this operator. Remember, inside-- since the click event is happening on a div, when this handler function gets called, the this parameter will refer to the div that got clicked on. So, we're going to set the css for the div that got clicked on.
The css we're going to set will be, we'll change the background to red and change the cursor to auto. so it's going to get rid of the pointer. And that should be all we need to do. So, now we're going to switch over to the browser and see if this works. So, I'm just going to double- click on this, bring up the browser. So you can see that as I'm mousing over this the little pointing cursor.
So I click on it once, it changes to red. You can see that the pointer went away, and if I click on it nothing happens anymore. So this is basically how you assign event handlers that only happen one time. So, let's just make sure that this works cross browser. I'm going to open this up with Firefox. Okay, and exactly the same behavior. You can see that now the event handler is only happening one time. So now that we've seen how to work with events, let's try and build a practical example and that's the subject of the next lesson.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 100970 Viewers
61 Video lessons · 87754 Viewers
71 Video lessons · 71647 Viewers
56 Video lessons · 103536 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.