0% found this document useful (0 votes)
9 views12 pages

fca1693f-5ba4-4bf5-b4f6-dbd564f3255c

Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
9 views12 pages

fca1693f-5ba4-4bf5-b4f6-dbd564f3255c

Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

UNIT – IV

Q: Define Event?

Ans: J a v a s c rip t h a s ev e n ts to p ro v id e a d yn a m ic in te rfa c e to a w e b p a g e . T h es e ev e n ts


a re h o o k ed to ele m en ts in th e D o c u m en t O b jec t M o d e l(D O M ) .
T h e s e ev e n ts b y d ef a u lt u s e b u b b lin g p ro p a g a tio n i.e , u p w a rd s in th e D O M fro m c h ild ren
to p a re n t. We ca n b in d ev e n ts eith e r as in lin e or in an ex tern a l s c rip t.
Syntax:

< H T M L -e le m e n t E ve n t-T yp e = "A c tio n to b e p erfo rm ed ">

Q: Define Event Handlers?

Ans: E ve n t h a n d le rs typ ic a lly h a ve n a m e s th a t b eg in w ith o n , fo r ex a m p le , th e ev en t


h a n d le r fo r th e c lic k ev en t is o n c lic k . To a s s ig n a n e ve n t h a n d le r to a n ev en t a s s o c ia te d
w ith a n H T M L e le m en t, yo u c a n u s e a n H T M L a ttrib u te w ith th e n a m e o f th e ev en t h a n d le r.

E v en t ha n d lers c a n b e u s e d to h a n d le a n d v erif y u s e r in p u t, u s e r a c tio n s , a n d b ro w s er


a c tio n s :

1. T h in g s th a t s h o u ld b e d o n e ev ery tim e a p a g e lo a d s
2. T h in g s th a t s h o u ld b e d o n e w h en the p a g e is c lo s ed
3. A c tio n th a t s h o u ld b e p erfo rm ed w h e n a u s e r c lic k s a b u tto n
4. C o n te n t th a t s h o u ld b e v erified w h e n a u s er in p u ts d a ta

Q: Write about different types of event names and explain them?

Ans: JavaScrip t Event Types

T h es e a re th e to p 5 typ e s o f J a va S c rip t E v en t d is c u s s e d b e lo w :

1. User Interface events

T h es e o c c u r a s th e re s u lt o f a n y in tera c tio n w ith th e b ro w s er w in d o w ra th er th a n th e


H T M L p a g e . In th es e e ve n ts , w e a tta c h th e ev en t lis ten e r to th e w in d o w o b jec t, n o t th e
d o c u m en t o b jec t. T h e va rio u s U I e ve n ts a re a s fo llo w s .

● onload
T h e lo a d e ve n t fire s w h en th e w eb p a g e fin is h es lo a d in g . It c a n a ls o fire o n n o d es o f
ele m e n ts lik e

● onunload

T h is ev en t fire s b e fo re th e us e rs le a ve th e p a g e, i. e., th e w e b p a g e is u n lo a d in g . P a g e
u n lo a d in g u s u a lly h a p p e n s b e c a u s e a n ew p a g e h a s b e en re q u e s te d .

● onerror

T h is ev en t fires w h e n th e b ro w s e r en c o u n ters a JavaScript error o r a n a s s et th a t d o es n ’


t e xis t.

● onresize

It fire s w h e n w e res iz e th e b ro w s er w in d o w . B u t b ro w s ers re p ea te d ly fire th is e ve n t, s o


a vo id u s in g th is ev en t to trig g er c o m p lic a te d c o d e ; it m ig h t m a k e th e p a g e les s
res p o n s ive .

2. Mouse events

T h es e ev en ts fire w h en th e m o u s e m o v es o r th e u s er c lic k s a b u tto n. A ll th e ele m e n ts o f


th e p a g e s up p o rt th es e ev en ts a n d u s e th e b u b b lin g a p p ro a c h . T h es e a c tio n s w o rk
d iff eren tly o n to u c h s c ree n d ev ic es . P re ve n tin g th e d e fa u lt b eh a v io r o f m o u s e e ve n ts c a n
c a u s e u n ex p ec ted res u lts . T h e v ario u s m o u s e e ve n ts o f J a va S c rip t a re a s fo llo w s :

● onclick

T h is e ve n t fires w h en th e u s er c lic k s o n th e p rim a ry m o u s e b u tto n (u s u a lly th e le ft b u tto n) .


T h is e ve n t a ls o fires if th e u s e r p res s e s th e E n ter k e y o n th e k e yb o a rd w h en a n elem en t
h a s fo c u s . A tap o n the s c ree n a c ts lik e a s in g le left-c lic k .

● ondblclick

T h is e ve n t fires w h en th e u s er c lic k s th e p rim a ry m o u s e b u tto n , in q u ic k s u c c e s s io n , tw ic e.


A d o u b le-ta p o n th e s c ree n a c ts lik e a d o u b le left-c lic k .

Accessibility: Y o u c a n a d d th e a b o v e tw o ev en ts to a n y ele m e n t, b u t it’ s b etter to a p p ly


it o n ly o n th e item s th at a re u s u a lly c lic k ed , o r it w ill n o t b e a c c e s s ib le th ro u g h k eyb o a rd
n a vig a tio n . A ll th e m o u s e e ve n ts d is c u s s ed b elo w c a nn o t b e trig g ere d b y th e k eyb o a rd .

● onmousedown
It fire s w h e n th e u s e r c lic k s d o w n o n a n y m o u s e b u tto n . Y o u c a n u s e th e touchstart ev en t.

● onMouseup

It fire s w h e n th e u s e r rele a s es a m o u s e b u tto n . Y o u c a n u s e th e touchend ev en t.

W e h a v e s e p a ra te mousedown a n d mouseup ev en ts to a d d d ra g -a n d -d ro p fu n c tio n a lity o r


c o n tro ls in gam e d ev elo p m en t. Don’ t f o rg e t a click ev en t is th e c o m b in a tio n
o f mousedown a n d mouseup e ve n ts .

● onmouseover

It fires w h e n th e u s er m o v es th e c u rs o r, w h ic h w a s o u ts id e a n elem en t b efo re , in s id e th e


ele m e n t. W e c a n s a y th a t it fires w h en w e m o ve th e c u rs o r o ve r th e e le m en t.

● onmouseout

It fires w h e n th e u s er m o v es th e c u rs o r, w h ic h w a s in s id e a n e le m en t b e fo re, o u ts id e th e
ele m e n t. W e c a n s a y th a t it fires w h en th e c u rs o r m o ve s o ff th e ele m e n t. T h e m o u s e o v er
a n d m o u s eo u t ev en ts u s u a lly c h a n g e th e a p p ea ra n c e o f g ra p h ic s o n o u r w eb p a g e. A
p re fered a ltern a tive to th is is to u s e th e CSS: hover p s e u d o -c la s s .

● onmousemove

It fire s w h e n th e u s e r m o v es th e c u rs o r a ro u n d th e e le m e n t. Th is ev en t is f re q u e n tly
trig g ere d .

3. Keyboard events

T h es e ev en ts f ire o n a n y k in d o f d ev ic e w h e n a u s er in te ra c ts w ith a k ey b o a rd .

● onkeydown

It fires w h e n th e u s e r p res s e s a n y k ey in th e k eyb o a rd . If th e u s er h o ld s d o w n th e k e y, th is


ev en t fire s re p e a te d ly.

● onkeypress

It fires w h e n th e u s er p re s s es a k ey th a t re s u lts in p rin tin g a c h a ra c ter o n th e s c ree n . T h is


ev en t fires rep e a ted ly if th e u s er h o ld s d o w n th e k ey. T h is ev en t w ill no t f ire f o r th e e n ter,
ta b , o r a rro w k e ys ; th e keydown e ve n t w o u ld .

● onkeyup
T h e k eyu p e ve n t fire s w h en th e u s e r relea s e s a k ey o n th e k e yb o ard . T h e k e yd o w n a n d
k ey p res s ev en ts fire b e fo re a c h a ra c te r a p p ea rs o n th e s c re en , th e k e yu p fires a fter it
s h o w s . T o k n o w th e k e y p res s e d w h e n yo u u s e th e k eyd o w n a n d k eyp re s s e ve n ts , th e
ev en t o b jec t h a s a keyCode p ro p erty. T h is p ro p e rty, in s te a d o f retu rn in g th e le tter fo r th a t
k ey , re tu rn s th e A S C II c o d e o f th e lo w e rc a s e fo r th a t k e y.

4. Form events

In p a rtic u la r, w e s e e th e s u b m it e ve n t m o s tly in fo rm o f va lid a tio n (c h ec k in g fo rm va lu e s ).


If th e u s e rs m is s a ny re q u ire d in fo rm a tio n o r en ter in c o rrec t in p u t, v a lid a tio n b efo re
s en d in g th e d a ta to th e s e rv er is fa s ter. T h e lis t b elo w e xp la in s th e d iffe re n t form
of e ve n ts a v a ila b le to th e u s e r.

● onsubmit

T h is e ve n t fires o n th e n o d e rep res en tin g th e <form> elem en t w h en a u s e r s u b m its a fo rm .

● On reset

T h e O n re s et ev en t h a n d le r in J a v as c rip t is a n e ve n t h a n d le r th a t is trig g ered w he n a u s er


res e ts a f o rm b y c lic k in g o n th e res e t b u tto n o f a fo rm . B y a d d in g th is e ve n t h an d ler to a
fo rm , w e c a n re la y to a u s e r ex a c tly w h a t w ill o c c u r w h e n h e o r s h e c lic k s th e fo rm 's re s et
b u tto n . In o rd er fo r th is ev en t h a n d ler to b e trig g e re d , th e fo rm m u s t h a ve a re s et b u tto n . If
it o n ly h a s a s u b m it b u tto n , it c a n n o t f u n c tio n . It g ets trig g ere d o n ly w ith a re s et b u tto n .

5. Focus events

T h es e ev en ts fire w h e n th e H T M L e le m e n ts yo u c a n in te ra c t w ith g a in / lo s e f o c u s . T he y
a re m o s t c o m m o n ly u s ed in fo rm s . T o trig g e r fo rm v a lid a tio n a s a u s er m o v es fro m o n e
c o n tro l to th e n ex t w ith o u t w a itin g to s u b m it th e f o rm .

● onfocus

T h is e ve n t fires , f o r a s p ec if ic D O M n o d e , w h en a n elem en t g a in s fo c u s .

Q: Write a program on onclick and ondblclick?

Ans:

< h tm l>

< h ea d >
< title> E v en t h a n d lin g < /title >

< s c rip t ty p e= ” te xt/ja va s c rip t” >

fu n c tio n s a yh e llo ( )

a lert(“ H ello to ev eryo n e ” )

F u n c tio n s a yb ye ( )

a lert(“ G o o d b ye to ev ery o n e ” );

< / s c rip t>

< b o d y>

< in p u t typ e= ” b u tto n ” o nc lic k = ” s a yh ello ( )” v a lu e = ” h ello ” >

< b r> < b r>

< in p u t typ e= ” b u tto n ” o nd b lc lic k = ” s a yb ye ( ) ” v a lu e= ” b ye ” >

< / b o d y> < / h tm l>

Q: Write a program on onfocus event?

Ans:

< h tm l>

< h ea d >

< title> o n fo c u s e ve nt< / title>

< s c rip t ty p e= ” te xt/ja va s c rip t” >

fu n c tio n fu n fo c u s ( )

{
A le rt(“ c lic k ed in th e in p u t” ) ;

< / s c rip t> < /h e a d >

< b o d y>

E n te r yo u r n a m e < in p u t typ e = ” tex t” o n f o c u s = ” f un f o c us ( ) ” >

< / b o d y>

< / h tm l>

Q: Write a program on onabort event( )?

Ans:

< h tm l>

< h ea d > < s c rip t la n g u a g e = ” ja v a s c rip t” typ e = ” tex t/ ja v a s c rip t” >

fu n c tio n e rro rh a n d le r( )

a lert(“ E rro r o c c u rre d w h ile lo a d in g o f im a g e” ) ;

< / s c rip t> < /h e a d >

< b o d y>

< im g s rc = ” e:\ ro s e.jp g ” o n erro r= ” erro rh a nd ler( )” >

< / b o d y>

< / h tm l>

Q: Write a program on onload and onunload events?

Ans:

< h tm l>

< h ea d > < title > o n lo ad a n d o n u n lo a d < /title >

< s c rip t la ng u a g e = ” ja va s c rip t” typ e = ” tex t/ ja v a s c rip t” >


fu n c tio n fu n lo a d ( )

a lert(“ W elc o m e to o u r w e b s ite. R elo a d th e w e b p a g e to trig g er o n u n lo a d ev en t” );

fu n c tio n fu n u n lo a d ( )

a lert(“ T h a n x fo r vis itin g o u r w e b s ite ” );

< / s c rip t> < / h ea d >

H ello

< b o d y o n lo a d = ” fu n lo a d ( )” o n u n lo a d =” f u n u nlo a d ( )” >

< / b o d y> < / h tm l>

Q: Write a program on key events?

Ans:

< h tm l>

< h ea d >

< title> K ey ev en ts < / title> < / h ea d >

< b o d y>

< s c rip t la ng u a g e = ” ja va s c rip t” typ e = ” tex t/ ja v a s c rip t” >

fu n c tio n k e yd o w n ( )

a lert(“ k ey p re s s ed ” );

fu n c tio n k e yu p ( )

{
a lert(“ k ey relea s e d ” );

fu n c tio n k e yp res s ( )

a lert(“ k ey p re s s ed a n d re le a s ed ” );

< / s c rip t>

O n k e y d o w n :< in p u t typ e = ” tex t” o n k e yd o w n= ” k e yd o w n ( ) ” > < b r>

O n k e y u p :< in p u t typ e = ” te xt” o n k e yu p = ” k e yu p ( )” > < b r>

O n k e y p re s s :< in p u t typ e = ” tex t” o n k e yp res s = ” k e yp re s s ( ) ” > < b r>

< / b o d y> < / h tm l>

Q: write a program on onsubmit?

Ans:

< h tm l>

< h ea d >

< title> s u b m it e ve n t< / title> < / h ea d >

< b o d y>

< s c rip t la ng u a g e = ” ja va s c rip t” typ e = ” tex t/ ja v a s c rip t” >

fu n c tio n v a lid a te fo rm ( )

v ar x= d o c u m e n t. m yF o rm .f na m e .va lu e;

if(x = = nu ll || x == ” “ )

a lert(“ firs t n a m e m u s t b e filled o u t” ) ;

}
els e

a lert(“ h ello ” + x);

< / s c rip t>

< fo rm n a m e = ” m yf o rm ” o n s u b m it= ” va lid a tef o rm ( )” m eth o d = ” p o s t” >

< p re >

F irs t n a m e : < in p u t typ e = ” te xt” n a m e = ” fn a m e ” > < b r> < b r>

< in p u t typ e= ” s u b m it” v a lu e= ” s u b m it” >

< / p re>

< / fo rm > < /b o d y> < / h tm l>

Q: Write a program on onmousemove and onmouseup?

Ans:

< h tm l>

< h ea d >

< s c rip t la ng u a g e = ” ja va s c rip t” typ e = ” tex t/ ja v a s c rip t” >

fu n c tio n m o u s e U p ( )

a lert(“ T h e m o u s e b u tto n is re le a s ed o n th e im a g e ” );

fu n c tio n m o u s e M o ve ( )

a lert(“ T h e m o u s e m o v es o v er the im a g e” );

< / s c rip t> < /h e a d >


< b o d y>

< im g s rc = ” e:\ ro s e.jp g ” o n M o u s eU p = ” m o u s e U p ( )” >

< b r>

< im g s rc = ” e:\ ro s e.jp g ” o n M o u s eM o v e= ” m o u s e M o ve ( )” >

< / b o d y> < / h tm l>

Q: write a program on onmouseover and onmouseout events?

Ans:

< h tm l>

< h ea d >

< s c rip t la ng u a g e = ” ja va s c rip t” typ e = ” tex t/ ja v a s c rip t” >

fu n c tio n o ve r( )

a lert(“ m o u s e o v er” );

fu n c tio n o u t( )

a lert(“ m o u s e o u t” );

< / s c rip t> < /h e a d >

< b o d y>

< in p u t typ e= ” b u tto n ” o n m o u s eo ve r= ” o ve r( )” o n m o u s eo u t= ” o u t” v a lu e = ” H ello ”


>

< / b o d y> < / h tm l>

Q: Write a program on onmove and onresize events?

Ans:
< h tm l>

< h ea d >

< s c rip t la ng u a g e = ” ja va s c rip t” typ e = ” tex t/ ja v a s c rip t” >

fu n c tio n fu n s iz e( )

a lert(“ w in d o w re s ize d ” );

fu n c tio n fu n m o v e( )

a lert(“ w in d o w m o ve d ” );

< / s c rip t> < /h e a d >

< b o d y o n re s iz e= ” f u nw s iz e( )” o n m o v e= ” fu n m o v e( ) ” >

< / b o d y> < / h tm l>

Q: Write a program on onselect and onreset events?

Ans:

< h tm l>

< h ea d >

< s c rip t la ng u a g e = ” ja va s c rip t” typ e = ” tex t/ ja v a s c rip t” >

fu n c tio n fu n res e t( )

a lert(“ d e fa u lts h a ve b e en re s to red ” );

fu n c tio n fu n s e le c t( )

{
a lert(“ s e lec t a n d c o p y n o t a llo w ed ” );

< / s c rip t> < /h e a d >

< b o d y>

< fo rm n a m e = ” fo rm 1 ” o n R es e t= ” fu n res e t( ) “ >

C o u n try: < in p u t typ e = ” te xt” nam e=” nam e” va lu e= ” In d ia ” s iz e= ” 1 0 ” o n s e le c t= ”


fu n s e le c t( )” > < b r> < b r>

< in p u t typ e= ” res e t” v a lu e = ” c le a r fo rm ” n a m e = ” re s et1 ” >

< / fo rm > < /b o d y> < / h tm l>

You might also like