Combining Multiple Events Using A Single Selector

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
€95.97
List Price:  €134.37
You save:  €38.39
£79.79
List Price:  £111.71
You save:  £31.92
CA$140.31
List Price:  CA$196.44
You save:  CA$56.13
A$153.75
List Price:  A$215.26
You save:  A$61.51
S$134.64
List Price:  S$188.51
You save:  S$53.86
HK$778.36
List Price:  HK$1,089.74
You save:  HK$311.37
CHF 89.34
List Price:  CHF 125.09
You save:  CHF 35.74
NOK kr1,107.14
List Price:  NOK kr1,550.05
You save:  NOK kr442.90
DKK kr715.75
List Price:  DKK kr1,002.09
You save:  DKK kr286.33
NZ$171.37
List Price:  NZ$239.93
You save:  NZ$68.55
د.إ367.26
List Price:  د.إ514.18
You save:  د.إ146.92
৳11,945.63
List Price:  ৳16,724.36
You save:  ৳4,778.73
₹8,442.99
List Price:  ₹11,820.52
You save:  ₹3,377.53
RM446.75
List Price:  RM625.47
You save:  RM178.72
₦169,271.38
List Price:  ₦236,986.70
You save:  ₦67,715.32
₨27,777.22
List Price:  ₨38,889.22
You save:  ₨11,112
฿3,446.26
List Price:  ฿4,824.91
You save:  ฿1,378.64
₺3,454.90
List Price:  ₺4,837
You save:  ₺1,382.10
B$580.04
List Price:  B$812.08
You save:  B$232.04
R1,815.38
List Price:  R2,541.61
You save:  R726.22
Лв187.66
List Price:  Лв262.73
You save:  Лв75.07
₩140,436.95
List Price:  ₩196,617.35
You save:  ₩56,180.40
₪371.46
List Price:  ₪520.07
You save:  ₪148.60
₱5,893.31
List Price:  ₱8,250.87
You save:  ₱2,357.56
¥15,475.45
List Price:  ¥21,666.25
You save:  ¥6,190.80
MX$2,042.64
List Price:  MX$2,859.78
You save:  MX$817.14
QR364.56
List Price:  QR510.41
You save:  QR145.84
P1,367.06
List Price:  P1,913.94
You save:  P546.88
KSh12,945.58
List Price:  KSh18,124.33
You save:  KSh5,178.75
E£4,964.52
List Price:  E£6,950.52
You save:  E£1,986
ብር12,237.67
List Price:  ብር17,133.23
You save:  ብር4,895.55
Kz91,290.87
List Price:  Kz127,810.87
You save:  Kz36,520
CLP$97,782.75
List Price:  CLP$136,899.76
You save:  CLP$39,117.01
CN¥724.22
List Price:  CN¥1,013.94
You save:  CN¥289.72
RD$6,024.63
List Price:  RD$8,434.73
You save:  RD$2,410.09
DA13,426.15
List Price:  DA18,797.15
You save:  DA5,371
FJ$227.57
List Price:  FJ$318.61
You save:  FJ$91.03
Q771.64
List Price:  Q1,080.33
You save:  Q308.69
GY$20,913.50
List Price:  GY$29,279.73
You save:  GY$8,366.23
ISK kr13,962.80
List Price:  ISK kr19,548.48
You save:  ISK kr5,585.67
DH1,005.63
List Price:  DH1,407.93
You save:  DH402.29
L1,821.98
List Price:  L2,550.85
You save:  L728.86
ден5,904.20
List Price:  ден8,266.12
You save:  ден2,361.91
MOP$801.48
List Price:  MOP$1,122.11
You save:  MOP$320.62
N$1,812.81
List Price:  N$2,538.01
You save:  N$725.20
C$3,678.31
List Price:  C$5,149.78
You save:  C$1,471.47
रु13,500.25
List Price:  रु18,900.90
You save:  रु5,400.64
S/379.05
List Price:  S/530.69
You save:  S/151.63
K402.47
List Price:  K563.48
You save:  K161
SAR375.40
List Price:  SAR525.58
You save:  SAR150.17
ZK2,764.29
List Price:  ZK3,870.12
You save:  ZK1,105.82
L477.77
List Price:  L668.90
You save:  L191.12
Kč2,432.37
List Price:  Kč3,405.42
You save:  Kč973.04
Ft39,496.05
List Price:  Ft55,296.05
You save:  Ft15,800
SEK kr1,103.50
List Price:  SEK kr1,544.95
You save:  SEK kr441.44
ARS$100,363.46
List Price:  ARS$140,512.86
You save:  ARS$40,149.40
Bs690.75
List Price:  Bs967.07
You save:  Bs276.32
COP$438,931.09
List Price:  COP$614,521.09
You save:  COP$175,589.99
₡50,918.63
List Price:  ₡71,288.12
You save:  ₡20,369.49
L2,526.16
List Price:  L3,536.73
You save:  L1,010.56
₲780,388.98
List Price:  ₲1,092,575.79
You save:  ₲312,186.81
$U4,261.82
List Price:  $U5,966.72
You save:  $U1,704.90
zł416.31
List Price:  zł582.85
You save:  zł166.54
Already have an account? Log In

Transcript

Hello, in this jQuery video, I am going to show you how to actually combine events. So if you have multiple events, and they are, they have the same selector, you can combine them into one little group. And this is pretty cool. So I'm just going to create element, a text area. And yeah, an empty text area in all fairness is fine. I'm happy with that.

So what I'm going to do is I'll add some text in there, one more I will do is, first of all, I'll just select it. So I will do it individually first, just to show you so say text area. And let's say on click, we are going to have a console onClick we're gonna have a console. Console dot log in the console was gonna log Are we in the log text area? Next, we are going to detect when the mouse has entered it. So we're gonna say, Man, enter the spell little and spell for us.

And for death, well, I'm more likely going to do is after you just change the CSS, some Java dot CSS. And I've got a separate set of videos in the series covering on CSS stuff. So feel free to check them out for more information, but just know what we're doing changing the color to red. And I'm mostly going to change it back essentially. So I may need to change that. You could put a hexadecimal value here as long anything that you want Put normally after the colon in here, so you can put it right here, before we load.

And as you can see, it does that and if I click it, it says text text to should say, text, area, text or is clicked. Okay, so that's all right. But what we can do is actually combine it. So to combine it, we like if we just do one selector. If you watch the video on binding or non binding are fantastic. If you haven't, I highly recommend going and checking it.

In that video, I covered binding it with the dot bind function, but I'm going to show you the.on function which essentially works the same way but this is the newer version of doing things. So I recommend using this version, I wanted to show both methods. So what you do is do.on don't do a function. You do these curly braces, which just indicates this group is going to be some cold Yeah. And because this isn't on any particular events and all of these, what we do is we put the event. So the first one is click a colon.

Now after this lovely presentation, after this is where we put out functions, oh, I will copy that. put that there. And I'll indent it. Now we just put, comma, no, enter, colon, same again, for copy that, paste it right here. And there we go. Comments are always per column when you want to put a number event, you could theoretically have this you know, like all on one line like this as well.

We just doesn't look very nice. This is just a lot easier to be able to see what's happening and what the code is doing them the overall flow of it and I You got the little start in politics, man? No, that's all done. Yeah, so Doc, you don't need a comma for the last one you can have it that won't actually prevent it from running. So that's totally up to you, you might want it there. So So the next time you put it, you put another event you know, are there anyone causing the error?

Okay, just to make sure it is definitely working with this new combine multi polar event was very epic multi event. And for the background color, yellow, not checking the back alley via wall tissue. That should be enough to show faces working. As you can see clo white on every click, epic multi event. So that is how you do multiple events using one selector. Really, really useful.

If you have any questions, feel free to pop me a message cuz we covered quite a lot in this tutorial. And as usual, I will Look forward to seeing you in the next video.

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.