Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
As I mentioned earlier one of the frustrating things about writing event handling code is that there is a lot of differences among the IE browsers and the browsers that use the DOM Event Model. One of the big differences is in the way the event objects are implemented in both browsers. The IE Event Object and the DOM Event Object have a couple of properties that intersect, but for the most part they are pretty different. jQuery helps solve this problem by smoothing these differences out and providing a single event object with the most important properties that you will use commonly.
You can see that here in the table. Now, I haven't listed all of the properties and methods because some of them are kind of advanced and esoteric. What I've done is listed the most common ones. So just taking a look at the properties available. The type property is essentially the type of the event that the event object is representing. So it'll be a string representing the event name, click for example, or mouse down or whatever. The target property is the element that issued the event. So looking at the event object, you can figure out which element in the page the event came from.
The data property is optional. If you passed any data parameter to the bind function, this property here will contain that value. The pageX and pageY properties are the coordinates of the mouse when the event happened. That's document relative. The result property is the value that was returned by the last event handler function, as long as the return was not undefined. Then the return value will be contained in here.
The timestamp is in milliseconds and that's the time when the event occurred. So, those are the most common properties. There is a couple of functions that you might want to use as well. The preventDefault() function prevents the browser from executing whatever the default action for the event is. So this essentially stops the event from causing whatever the browser would normally do with it. So for example following a link. The isDefaultPrevented() function will return whether the preventDefault() function was ever called on this event object.
So to see if that was ever prevented you can check this function. And stopPropogation() stops the bubbling of an event up to the parent elements. Now, it's beyond the scope of this title to explain event bubbling. But if you are familiar with the DOM level 2, what happens is when an event happens in a child element, and this isn't true of all events, but it's true mostly for mouse events. When an event happens, if the element that it happens on does not handle the event, it will then bubble up, like a bubble in liquid, to the elements above it.
You can stop that from happening by calling stopPropogation(). It will simply stop the element right in its tracks. And then similarly, for preventDefault(). If you call isPropogationStopped(), you can see if stopPropogation() was ever called on this particular event object. So let's jump over to the code and take a look at using the event object in an example. So here is the file. You can see we've got three divs.
And what I'm going to do is in source code, I'm going to write some code that's going to respond to an event and set some information inside each one of the divs. So, here I've got my jQuery already installed, so I am kind of writing the script. When the page loads, what I'm going to do is setup some event handlers on each one of the divs. So I'm going to write a quick query to get all the divs and assign event handlers to them.
So for the click function, I'm going to write a little anonymous function that takes the event object. And what we are going to do is just inside the div that was clicked, we're going to set the HTML content to be the contents of some interesting parts of the event object. So, for example well just say, let's see, pageX was and that will be evt.pageX + pageY, and that will be evt.pageY +, and we'll get the type of the event.
The type will be evt.type +, and that will be the target, + evt.target. And I think that probably pretty much about covers what we're going to put on there. Okay. Let's try that. We'll save.
Now, let's jump on over to the browser. So now I'm going to bring this up in the browser. You can see that as I'm clicking on each one of the divs, the event is happening, and you can see that the mouse position is being updated each time. Okay. Let's see if this works cross browser the way it's supposed to. Okay, so now I'm going to bring this up in Firefox. Okay.
All right, there is the Firefox browser. Yup, you can see that it's working just exactly the same way. So we were able to really easily write some cross browser handling code that uses the unified event object to get information about events that happen. So that's the event object. Let's move on to our next example.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 96915 Viewers
56 Video lessons · 110600 Viewers
71 Video lessons · 79431 Viewers
131 Video lessons · 38109 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.