Events - Introduction

3 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$69.99
List Price:  $99.99
You save:  $30
€65.24
List Price:  €93.21
You save:  €27.96
£55.79
List Price:  £79.71
You save:  £23.91
CA$95.78
List Price:  CA$136.84
You save:  CA$41.05
A$107.15
List Price:  A$153.08
You save:  A$45.92
S$95.25
List Price:  S$136.08
You save:  S$40.82
HK$547.16
List Price:  HK$781.69
You save:  HK$234.53
CHF 63.78
List Price:  CHF 91.12
You save:  CHF 27.33
NOK kr771.03
List Price:  NOK kr1,101.52
You save:  NOK kr330.49
DKK kr486.66
List Price:  DKK kr695.26
You save:  DKK kr208.59
NZ$117.65
List Price:  NZ$168.07
You save:  NZ$50.42
د.إ257.05
List Price:  د.إ367.24
You save:  د.إ110.18
৳7,682.75
List Price:  ৳10,975.83
You save:  ৳3,293.07
₹5,839.27
List Price:  ₹8,342.17
You save:  ₹2,502.90
RM334.02
List Price:  RM477.20
You save:  RM143.17
₦92,745.84
List Price:  ₦132,499.74
You save:  ₦39,753.90
₨19,488.62
List Price:  ₨27,842.08
You save:  ₨8,353.45
฿2,593.98
List Price:  ฿3,705.84
You save:  ฿1,111.86
₺2,266.58
List Price:  ₺3,238.11
You save:  ₺971.53
B$358.23
List Price:  B$511.78
You save:  B$153.55
R1,308.04
List Price:  R1,868.72
You save:  R560.67
Лв127.69
List Price:  Лв182.42
You save:  Лв54.73
₩96,593.58
List Price:  ₩137,996.75
You save:  ₩41,403.16
₪262.11
List Price:  ₪374.46
You save:  ₪112.34
₱4,037.82
List Price:  ₱5,768.57
You save:  ₱1,730.74
¥10,982.62
List Price:  ¥15,690.13
You save:  ¥4,707.51
MX$1,188.90
List Price:  MX$1,698.50
You save:  MX$509.60
QR255.36
List Price:  QR364.82
You save:  QR109.45
P960.21
List Price:  P1,371.80
You save:  P411.58
KSh9,275.87
List Price:  KSh13,251.81
You save:  KSh3,975.94
E£3,354.25
List Price:  E£4,792
You save:  E£1,437.74
ብር4,018.25
List Price:  ብር5,740.61
You save:  ብር1,722.35
Kz58,443.04
List Price:  Kz83,493.64
You save:  Kz25,050.60
CLP$66,028.30
List Price:  CLP$94,330.18
You save:  CLP$28,301.88
CN¥506.69
List Price:  CN¥723.88
You save:  CN¥217.18
RD$4,095.54
List Price:  RD$5,851.02
You save:  RD$1,755.48
DA9,393.81
List Price:  DA13,420.31
You save:  DA4,026.49
FJ$158.42
List Price:  FJ$226.32
You save:  FJ$67.90
Q544.03
List Price:  Q777.22
You save:  Q233.19
GY$14,645.70
List Price:  GY$20,923.32
You save:  GY$6,277.62
ISK kr9,806.99
List Price:  ISK kr14,010.59
You save:  ISK kr4,203.60
DH708.51
List Price:  DH1,012.20
You save:  DH303.69
L1,235.26
List Price:  L1,764.74
You save:  L529.47
ден4,024.43
List Price:  ден5,749.43
You save:  ден1,725
MOP$564.37
List Price:  MOP$806.28
You save:  MOP$241.91
N$1,312.44
List Price:  N$1,875
You save:  N$562.55
C$2,589.99
List Price:  C$3,700.15
You save:  C$1,110.15
रु9,350.18
List Price:  रु13,357.97
You save:  रु4,007.79
S/262
List Price:  S/374.30
You save:  S/112.30
K266.57
List Price:  K380.83
You save:  K114.26
SAR262.49
List Price:  SAR375.01
You save:  SAR112.51
ZK1,865.62
List Price:  ZK2,665.29
You save:  ZK799.66
L324.62
List Price:  L463.77
You save:  L139.14
Kč1,642.25
List Price:  Kč2,346.17
You save:  Kč703.92
Ft25,489.50
List Price:  Ft36,415.13
You save:  Ft10,925.63
SEK kr767.15
List Price:  SEK kr1,095.98
You save:  SEK kr328.82
ARS$61,365.44
List Price:  ARS$87,668.68
You save:  ARS$26,303.23
Bs484.79
List Price:  Bs692.59
You save:  Bs207.79
COP$272,495.59
List Price:  COP$389,296.10
You save:  COP$116,800.51
₡35,128.88
List Price:  ₡50,186.26
You save:  ₡15,057.38
L1,728.92
List Price:  L2,470
You save:  L741.07
₲521,305.22
List Price:  ₲744,753.66
You save:  ₲223,448.44
$U2,682.06
List Price:  $U3,831.68
You save:  $U1,149.62
zł282.11
List Price:  zł403.03
You save:  zł120.92
Already have an account? Log In

Transcript

So today we look into events. So what are events? And what are different types of events? And what are some of the events that we can get started with. So before we begin, as usual, the code will be available on the get repository. So with that said, let's get started.

So one main example that we can use to jump into events is for buttons, right? So buttons, if we have a button that says, click me, and you want to run a function when the button is clicked, so you know how to add functions in view. We discussed about it. So we can use methods that says, clicked, have function and inside this function, we get an alert. Right? Now, what do I do to make sure that the method clicked, runs whenever the button is clicked?

So for that, we can use something called as events in plain JavaScript, you would use something such as on click, but in Vue JS you would use beyond click and oh, it shows us Write up, clicked. So we on his editor used for events. So we on click binds this function, click on to this button. So whenever the button is clicked, or whenever the event click happens on this button, this method is done. So we'll save it. And let's check it out.

Click me, right click, the button was clicked. Awesome. All right, now we can do much more than just displaying an alert. Suppose we have a counter counter. I know what I want is, whenever the button is clicked, I want the counter to increase. So whenever it is clicked this counter plus plus.

And he don't click me. The counter increases whenever I click the button, right. So now since this counter plus plus is just a single line, but since this increment is just one line, it doesn't need a specific function for it or specific method for it. It's To have a method for all these properties, because when someone else comes in, they know that a particular function is happening. Or when if you want to do much more than just increasing the counter, you could easily add it. But so just to show you that it can also be done, we can create, we can remove the click method from here, and we can just increment the counter right here.

So if I refresh, it still works. So if it's a single an operation, we can just do it from here, directly or through method, right? One more neat thing we what we can do is we can also use double click. So in JavaScript you have on click and on double click right. So similarly in view, to use double click, we need to say V on double click. So what happens is whenever I double click then when the value increases.

All right, that's it for this introduction of events. In the next lecture, we'll look into different types of events. events and what all we can do. And once again, this whole code will also be available on GitHub. So that's that. Alright, see you the next one.

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.