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);
<div>Web Programming and Development</div>
h2 { text-decoration: underline; }
function someFunction() { alert("CoursesWeb.net"); } setTimeout("someFunction()", 2000);
$food =["fruits" =>["banana", "mar"), "veggie" =>["ceapa", "rosie")); $nr_food = count($food, 1); echo $nr_food; // 6
The child will haven't played by Sunday. - Copilul nu s-ar fi jucat pana duminica.
Él no habrá contado el cuento. - El nu ar fi spus povestea.