Using the Event Object

Modern JavaScript Manipulating HTML Pages
5 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€92.78
List Price:  €129.90
You save:  €37.11
£79.40
List Price:  £111.16
You save:  £31.76
CA$136.11
List Price:  CA$190.56
You save:  CA$54.44
A$154.13
List Price:  A$215.78
You save:  A$61.65
S$135.08
List Price:  S$189.12
You save:  S$54.03
HK$782.28
List Price:  HK$1,095.23
You save:  HK$312.94
CHF 90.61
List Price:  CHF 126.85
You save:  CHF 36.24
NOK kr1,085.23
List Price:  NOK kr1,519.37
You save:  NOK kr434.13
DKK kr692.01
List Price:  DKK kr968.84
You save:  DKK kr276.83
NZ$167.80
List Price:  NZ$234.94
You save:  NZ$67.13
د.إ367.19
List Price:  د.إ514.08
You save:  د.إ146.89
৳10,976.08
List Price:  ৳15,366.96
You save:  ৳4,390.87
₹8,339.52
List Price:  ₹11,675.66
You save:  ₹3,336.14
RM473.25
List Price:  RM662.57
You save:  RM189.32
₦141,842.81
List Price:  ₦198,585.61
You save:  ₦56,742.80
₨27,810.04
List Price:  ₨38,935.18
You save:  ₨11,125.13
฿3,647.70
List Price:  ฿5,106.92
You save:  ฿1,459.22
₺3,232.12
List Price:  ₺4,525.11
You save:  ₺1,292.98
B$499.21
List Price:  B$698.91
You save:  B$199.70
R1,908.54
List Price:  R2,672.04
You save:  R763.49
Лв180.65
List Price:  Лв252.92
You save:  Лв72.26
₩135,197.71
List Price:  ₩189,282.20
You save:  ₩54,084.49
₪368.63
List Price:  ₪516.10
You save:  ₪147.47
₱5,633.91
List Price:  ₱7,887.71
You save:  ₱2,253.79
¥15,144.47
List Price:  ¥21,202.86
You save:  ¥6,058.39
MX$1,659.40
List Price:  MX$2,323.22
You save:  MX$663.82
QR364.31
List Price:  QR510.04
You save:  QR145.73
P1,370.91
List Price:  P1,919.33
You save:  P548.42
KSh13,148.68
List Price:  KSh18,408.68
You save:  KSh5,260
E£4,729.52
List Price:  E£6,621.52
You save:  E£1,892
ብር5,680.63
List Price:  ብር7,953.11
You save:  ብር2,272.48
Kz83,612.74
List Price:  Kz117,061.18
You save:  Kz33,448.44
CLP$97,978.20
List Price:  CLP$137,173.40
You save:  CLP$39,195.20
CN¥722.95
List Price:  CN¥1,012.16
You save:  CN¥289.21
RD$5,921.50
List Price:  RD$8,290.34
You save:  RD$2,368.83
DA13,490.83
List Price:  DA18,887.70
You save:  DA5,396.87
FJ$226.12
List Price:  FJ$316.58
You save:  FJ$90.46
Q779.86
List Price:  Q1,091.83
You save:  Q311.97
GY$20,923.51
List Price:  GY$29,293.76
You save:  GY$8,370.24
ISK kr13,946.60
List Price:  ISK kr19,525.80
You save:  ISK kr5,579.20
DH1,013.19
List Price:  DH1,418.51
You save:  DH405.32
L1,763.34
List Price:  L2,468.75
You save:  L705.40
ден5,702.11
List Price:  ден7,983.18
You save:  ден2,281.07
MOP$805.89
List Price:  MOP$1,128.28
You save:  MOP$322.39
N$1,893.44
List Price:  N$2,650.90
You save:  N$757.45
C$3,681.15
List Price:  C$5,153.75
You save:  C$1,472.60
रु13,335.63
List Price:  रु18,670.42
You save:  रु5,334.78
S/370.84
List Price:  S/519.19
You save:  S/148.35
K382.72
List Price:  K535.82
You save:  K153.10
SAR375
List Price:  SAR525.01
You save:  SAR150.01
ZK2,522.76
List Price:  ZK3,531.96
You save:  ZK1,009.20
L461.43
List Price:  L646.02
You save:  L184.59
Kč2,350.75
List Price:  Kč3,291.15
You save:  Kč940.39
Ft36,729.02
List Price:  Ft51,422.10
You save:  Ft14,693.08
SEK kr1,071.30
List Price:  SEK kr1,499.86
You save:  SEK kr428.56
ARS$85,766.82
List Price:  ARS$120,076.98
You save:  ARS$34,310.16
Bs691.04
List Price:  Bs967.48
You save:  Bs276.44
COP$387,583.68
List Price:  COP$542,632.66
You save:  COP$155,048.97
₡50,832.34
List Price:  ₡71,167.31
You save:  ₡20,334.97
L2,468.78
List Price:  L3,456.40
You save:  L987.61
₲737,805.73
List Price:  ₲1,032,957.54
You save:  ₲295,151.80
$U3,781.90
List Price:  $U5,294.82
You save:  $U1,512.91
zł400.73
List Price:  zł561.05
You save:  zł160.31
Already have an account? Log In

Transcript

In what we've dealt with so far with events, we have yet to talk about the event object. Every time an event fires, an event object is passed to the handler function. And we can if we choose to capture that event object, and that can provide additional information to us about the event, which sometimes is useful. Now, how would we capture that event object? Well, it's simple. Looking at the example we used in the previous video.

Here's our two step process. We capture the node from the dome, replace it in a variable and then when we add an event listener, and define the function, we simply include a variable inside the parentheses and the event object will be placed into that variable so that we will be able to reference it. Usually that variable is an E or event is sometimes used. And then we can use that event object if needed. Let's open sublime and jump to the example that we were using in the previous video, where we had several event listeners. And let's first capture the event object for the click event.

So to do that, I'm simply going to enter event. Place a parameter in that function that will capture the event. Now the first thing I want to do is I just want to display to you what's available in the event objects. I'm going to do that by doing a console dot dir on the event object, let's go ahead and save that. Let's jump out to that page. refresh it.

I'm going to click on the H two that will cause it to find And passing that event object. Now I'll open up the console. And we can see that it has displayed the event object. And we're able to open it up and take a look at the properties that are associated with that event object. Notice that the top first property is the Alt key and that set defaults. Well, that's simply telling us whether the Alt key was held at the same time the button was clicked.

So it's that kind of information that we can gather from the event object, we can also determine the position of the mouse based upon information. We also have down here a little bit a target, the target tells us which object received the event. We have a current target as well. And those can be useful. In fact, let's look at a situation where that might be useful. I'm going to jump Back to sublime.

And I'm going to go down now to the event listener that we added to the UL tag. And I'm going to console log, the event target and the whoops the event current target. So we can take a look at the difference between those two. I'm gonna go ahead and save that. Refresh the page, double click on one of these, and I'll open up the console. So the target is the Li tag that I clicked on or double clicked on.

The current target is actually the object where the event listener is located, where it is attached, and so that is the UL tag. So knowing the difference Between that that can be helpful. So let's go back to sublime. Now I can make a modification here, I'm going to comment out that code. And I will simply use the target to change the color. Notice that I didn't put the event variable in here.

Well, because I used event it was smart enough to know that I was grabbing the event object. If I would have used a different variable, like E, I would need to then grab that. So I'm going to enter e dot target dot style dot color equals green. Now this will cause the one that I double click to turn green. So a bit different than what we were doing before but it illustrates how we can use the event object at times and jump back out Refresh, double click. Now if I double click on that again, and again, it will just keep making that one green.

If I want another one green, I need to double click on the one I want green. So the event object can be useful in certain situations. And if you need it, then you would capture it and then access the properties or methods that you need. Let's move on to the next topic.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.