Aici sunt prezentate diferențele dintre versiunile selectate și versiunea curentă a paginii.
Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
module:11-basic-web-dev:lectie-09 [2014/11/14 20:02] astoican |
module:11-basic-web-dev:lectie-09 [2014/11/14 20:15] astoican [Evenimentele onMouseOver și onMouseOut] |
||
---|---|---|---|
Linia 2: | Linia 2: | ||
====Tutorial==== | ====Tutorial==== | ||
- | În lecția de astăzi vom învătă câteva evenimente din JavaScript. În lecția precedentă am învățat deja de evenimentul **onClick** care specifica ce trebuie să se întâmple când se dă click pe un element din pagina HTML. | + | În lecția de astăzi vom învătă câteva evenimente din JavaScript. În lecția precedentă am învățat deja de evenimentul **onClick** care specifica ce trebuie să se întâmple când se dă click pe un element din pagina **HTML**. |
Astăzi vom continua să învățăm despre evenimentele: | Astăzi vom continua să învățăm despre evenimentele: | ||
*onMouseOver | *onMouseOver | ||
Linia 24: | Linia 24: | ||
====Evenimentele onMouseOver și onMouseOut==== | ====Evenimentele onMouseOver și onMouseOut==== | ||
**onMouseOver ** - Acționează când se poziționează mouse-ul deasupra unui link sau unei imagini. | **onMouseOver ** - Acționează când se poziționează mouse-ul deasupra unui link sau unei imagini. | ||
- | **onMouseOut** - Acționează când se mută mouse-ul de pe un hiperlink sau o imagine. | + | **onMouseOut** - Acționează când se mută mouse-ul de pe un link sau o imagine. |
Exemplu: | Exemplu: | ||
- | <p data-height="268" data-theme-id="0" data-slug-hash="raNpxm" data-default-tab="result" data-user="andreeas" class='codepen'>See the Pen <a href='http://codepen.io/andreeas/pen/raNpxm/'>raNpxm</a> by andreea (<a href='http://codepen.io/andreeas'>@andreeas</a>) on <a href='http://codepen.io'>CodePen</a>.</p> | + | <html><p data-height="268" data-theme-id="0" data-slug-hash="raNpxm" data-default-tab="result" data-user="andreeas" class='codepen'>See the Pen <a href='http://codepen.io/andreeas/pen/raNpxm/'>raNpxm</a> by andreea (<a href='http://codepen.io/andreeas'>@andreeas</a>) on <a href='http://codepen.io'>CodePen</a>.</p> |
- | <script async src="//assets.codepen.io/assets/embed/ei.js"></script> | + | <script async src="//assets.codepen.io/assets/embed/ei.js"></script></html> |
+ | |||
+ | ====Evenimentul onMouseMove==== | ||
+ | Acționează când se mișcă mouse-ul. | ||
+ | |||
+ | Exemplu: | ||
+ | <html><p data-height="268" data-theme-id="0" data-slug-hash="dPyJXq" data-default-tab="result" data-user="andreeas" class='codepen'>See the Pen <a href='http://codepen.io/andreeas/pen/dPyJXq/'>dPyJXq</a> by andreea (<a href='http://codepen.io/andreeas'>@andreeas</a>) on <a href='http://codepen.io'>CodePen</a>.</p> | ||
+ | <script async src="//assets.codepen.io/assets/embed/ei.js"></script></html> | ||
+ | |||
+ | ====Evenimentele onMouseDown si onMouseUp==== | ||
+ | **onMouseDown** - Acționează când ținem apăsat unul din butoanele mouse-ului, pe un document, buton sau link. | ||
+ | **onMouseUp** - Acțiunea se execută atunci când este eliberat degetul de pe unul din butoanele mouse-ului. | ||
+ | |||
+ | Exemplu: | ||
+ | <html><p data-height="108" data-theme-id="0" data-slug-hash="dPyJWQ" data-default-tab="result" data-user="andreeas" class='codepen'>See the Pen <a href='http://codepen.io/andreeas/pen/dPyJWQ/'>dPyJWQ</a> by andreea (<a href='http://codepen.io/andreeas'>@andreeas</a>) on <a href='http://codepen.io'>CodePen</a>.</p> | ||
+ | <script async src="//assets.codepen.io/assets/embed/ei.js"></script></html> | ||
+ | |||
+ | ====Evenimentul onFocus==== | ||
+ | Acțiunea apare când este activat un obiect câmp: casetă password, câmp text, bloc de text, dintr-un formular HTML. | ||
+ | |||
+ | Exemplu: | ||
+ | <html><p data-height="108" data-theme-id="0" data-slug-hash="JojMyZ" data-default-tab="result" data-user="andreeas" class='codepen'>See the Pen <a href='http://codepen.io/andreeas/pen/JojMyZ/'>JojMyZ</a> by andreea (<a href='http://codepen.io/andreeas'>@andreeas</a>) on <a href='http://codepen.io'>CodePen</a>.</p> | ||
+ | <script async src="//assets.codepen.io/assets/embed/ei.js"></script></html> | ||
+ | |||
+ | ====Evenimentul onBlur==== | ||
+ | Este inversul lui onFocus, este declanșat atunci când un obiect nu mai este activ, prin trecerea la o alta resursă. | ||
+ | |||
+ | Exemplu: | ||
+ | <html><p data-height="108" data-theme-id="0" data-slug-hash="bNGaoV" data-default-tab="result" data-user="andreeas" class='codepen'>See the Pen <a href='http://codepen.io/andreeas/pen/bNGaoV/'>bNGaoV</a> by andreea (<a href='http://codepen.io/andreeas'>@andreeas</a>) on <a href='http://codepen.io'>CodePen</a>.</p> | ||
+ | <script async src="//assets.codepen.io/assets/embed/ei.js"></script></html> | ||
+ | |||
+ | ====Evenimentul onChange==== | ||
+ | Acțiunea apare când se modifică conținutul unui câmp dintr-un formular HTML (o parolă, text, bloc de text) și când acesta pierde focalizarea. | ||
+ | |||
+ | Exemplu: | ||
+ | <html><p data-height="108" data-theme-id="0" data-slug-hash="ogNpGQ" data-default-tab="result" data-user="andreeas" class='codepen'>See the Pen <a href='http://codepen.io/andreeas/pen/ogNpGQ/'>ogNpGQ</a> by andreea (<a href='http://codepen.io/andreeas'>@andreeas</a>) on <a href='http://codepen.io'>CodePen</a>.</p> | ||
+ | <script async src="//assets.codepen.io/assets/embed/ei.js"></script></html> |