Evenimentele sunt actiuni efectuate de utilizator in pagina web.
De exemplu, click-ul sau pozitionarea cursorului pe un element, scrierea intr-o caseta text input, sau derularea paginii, sunt evenimente efectuate de utilizator.
Pentru a putea executa un anumit cod JS cand un eveniment e declansat, JavaScript contine asa numitele "event handlers" (manipulatoare de evenimente), precum: onclick, onmouseover, onkeypress, onscroll, etc.
element.event_handler = oFunctie;- element reprezinta elementul ce declanseaza evenimentul respectiv (event_handler), care va executa functia oFunctie.
<div id="dvid" style="width:100px; background:#a8eda9; cursor:pointer;">Click here</div> <script type="text/javascript"><!-- var elm = document.getElementById('dvid'); // preia elementul // functie executata cand se produce evenimentul function oFunctie() { alert('Eveniment click detectat'); } // inregistrare event handler onclick elm.onclick = oFunctie; --></script>Demo:
element.event_handler = function() { // codul ce va fi executat };Exemplu:
<div id="dvid" style="width:100px; background:#a8eda9; cursor:pointer;">Click aici</div> <script type="text/javascript"><!-- var elm = document.getElementById('dvid'); // preia elementul // inregistrare event handler onclick elm.onclick = function() { alert('Detectare click - functie anonima'); }; --></script>Demo:
element.event_handler = null;- Exemplu. Cand utilizatorul plaseaza cursorul peste DIV-ul cu id="dvid", se afiseaza o fereastra Alert, apoi se sterge detectarea "onmouseover" la acel element, astfel, cand utilizatorul muta a doua oara cursorul peste acel DIV nu se intampla nimic.
<div id="dvid" style="width:100px; background:#a8eda9;">Mutati cursorul aici.</div> <script type="text/javascript"><!-- var elm = document.getElementById('dvid'); // preia elementul // inregistrare event handler onmouseover elm.onmouseover = function() { alert('Plasati inca o data cursorul pe acel text'); elm.onmouseover = null; // sterge inregistrarea }; --></script>Demo:
<div id="dvid" style="width:125px; background:#a8eda9; cursor:pointer;">Exemplu cu this</div> <script type="text/javascript"><!-- var elm = document.getElementById('dvid'); // preia elementul // inregistrare event handler onclick elm.onclick = function() { // preia continutul HTML din elementul curent (cel ce declanseaza evenimentul) var elm_cnt = this.innerHTML; alert(elm_cnt); // alert acel continut // setare culoare background la elementul curent this.style.background = 'blue'; }; --></script>Demo (click pe textul urmator):
element.addEventListener('event', oFunctie, use_capture);- event - e un sir cu tipul de eveniment ce trebuie detectat, fara prefixul "on" ("click", "mouseover", "mouseout", ...).
<ul> <li>WebDevelopment - www.coursesweb.net</li> <li>Cursuri gratuite - marplo.net</li> <li>Manual PHP - www.php.net</li> </ul> <script type="text/javascript"><!-- var elm_li = document.getElementsByTagName('li'); // preia toate tag-urile <li> // functie executata la mouseover function over() { // seteaza o culoare de fundal la elementul curent this.style.background = '#07da08'; } // functie executata la mouseout function out() { // sterge culoarea de fundal a elementului curent this.style.background = 'none'; } // parcurge obiectul cu elementele LI for(var i=0; i<elm_li.length; i++) { // inregistrare mouseover si mouseout la fiecare LI elm_li[i].addEventListener('mouseover', over, true); elm_li[i].addEventListener('mouseout', out, false); } --></script>Demo (miscati cursorul pe lista de jos):
element.removeEventListener('event', oFunctie, false);
<img src="image.jpg" usemap="#map1"> <map name="map1"> <area shape="rect" coords="9, 120, 56, 149" href="#"> <area shape="rect" coords="100, 200, 156, 249" href="#"> </map>
#id { overflow: auto; }
document.getElementById("id").onmouseover = function(){ document.write("Sa ai Viata Buna"); }
if(isset($_GET["id"])) { echo $_GET["id"]; }
Marc is the boy who won the prize. - Marc e baiatul care a castigat premiul.
Voy a ver al pintor de quien les hablé ayer. - Ma duc sa vad pictorul despre care ti-am vorbit ieri.