Tehnici Web

Evenimente

Claudia Chiriță . 2023/2024

JavaScript: proprietatea onclick

obiect.onclick = function(){cod JavaScript};
obiect.onclick = nume-functie-js;

Evenimente

evenimentele au loc în DOM; nu sunt elemente JavaScript
browserul detectează un eveniment și îl anunță
unui eveniment îi sunt asociate unele elemente JavaScript specifice: name, target, handler
tipuri de evenimente: form events, window events, mouse events, key events etc.

Evenimente

la apariția unui eveniment este creat un obiect de tip Event care poate fi referit prin identificatorul event
- referință HTML (event):
- e - parametrul implicit al funcției apelate de eveniment
```
element.onclick = function(e){}
```

Obiecte Event: proprietăți

event.type // numele evenimentului

event.target // ținta inițială a evenimentului

event.currentTarget /* ținta curentă a evenimentului 
                       (la capturare sau propagare) */

event.timeStamp /* numărul de milisecunde de la
                   încărcarea documentului pâna la 
                   crearea evenimentului */

Mouse Events

evenimente determinate de mouse
reprezentate prin obiecte de tipul MouseEvent

    click, dblclick
    mouseover, mouseout
    mousedown, mouseup
    mouseleave

Mouse Events

proprietăți speciale:

event.button // 0 (stânga) 1(mijloc) 2(dreapta)
          
event.clientX, event.clientY /* poziția în fereastră  
                                (zona vizibilă) */
event.pageX, event.pageY // poziția în document
event.screenX, event.screenY // poziția în ecran   
  
event.relatedTarget /* elementul legat de elementul care 
                       a declanșat evenimentul */

Keyboard Events

evenimente determinate de interacțiunea cu tastatura
reprezentate prin obiecte de tipul KeyboardEvent
```
 keydown, keyup
 keypress // deprecated!
```

proprietăți:

 event.key // tasta apasată 
 event.altKey // boolean 
 event.ctrlKey // boolean 
 event.keyCode, event.which // deprecated!

Event listeners

metode care înregistrează funcții handler pentru evenimente
un eveniment poate avea înregistrate mai multe funcții handler

// addEventListener(type, listener, useCapture)
el.addEventListener("click", handleClick, false)

// removeEventListener(type, listener, useCapture)
el.removeEventListener("click", handleClick, true)

Event listeners

var b = document.getElementById("buton");
          
// b.onclick = function(){ alert("Hello, bunny!"); }
b.addEventListener("click", 
                   function(){alert("Hello, bunny!");},
                   false)

Handlers

captarea evenimentelor: obiectul event este transmis ca prim argument al funcției handler

// el.onclick = myfct;
el.addEventListener("click", myfct);

function myfct (event) { alert(event.type); }

// el.onclick = function (event) { alert(event.type); }
el.addEventListener("click", function (event) { alert(event.type); } )

Handlers

la apariția unui eveniment, funcțiile handler sunt executate în ordinea în care sunt definite

ordinea de execuție a handlerelor în ceea ce privește nodurile imbricate poate fi controlată prin parametrul boolean useCapture al metodei addEventListener la setarea unui handler pentru un nod părinte

false // BUBLLING (implicit)
true // CAPTURING

Event bubbling & capture

modele de execuție:

bubbling: se execută mai întâi handlerul pentru copil, apoi handlerul pentru părinte
capturing: se execută mai întâi handlerul pentru părinte, apoi cel pentru copil

Event bubbling & capture

E1, E2: handlere pentru onclick
eveniment: click pe E2

modele de executie:
CAPTURING - handler E1, handler E2
BUBBLING - handler E2, handler E1

Event bubbling & capture

<!DOCTYPE html>
<html>
  <head>
     <link rel="stylesheet" href="demo.css">
     <style> 
       .alb{ background-color: white; 
             color: black; }
       .roz{ background-color: pink; }
       .gal{ background-color: yellow; }
       div{ border: 3px solid pink;
            width: 300px; height:300px; }
       p { border: 3px solid yellow; }
     </style>
     <script type="text/javascript">
        window.onload = function() {
        var bunic = document.body;
        var parinte = document.getElementById("parinte");
        var copil = document.getElementById("copil");
        bunic.addEventListener("click", function() {
            alert("BODY");
            bunic.className="alb"; }, true);
        parinte.addEventListener("click", function() { 
            alert("DIV");
            parinte.className="roz"; }, false);
        copil.addEventListener("click", function() { 
            alert("P"); 
            copil.className="gal"; } );
        }
     </script>
  </head>
  <body id="bunic">
    <div id="parinte">div 
      <p id="copil">paragraf</p>
    </div>
  </body>  
</html>

Obiecte Event: METODE

```
event.stopPropagation()
```
oprește propagarea evenimentului în DOM

stopPropagation()

<!DOCTYPE html>
<html>
  <head>
     <link rel="stylesheet" href="demo.css">
     <style> 
       .alb{ background-color: white; 
             color: black; }
       .roz{ background-color: pink; }
       .gal{ background-color: yellow; }
       div{ border: 3px solid pink;
            width: 300px; height:300px; }
       p { border: 3px solid yellow; }
     </style>
     <script type="text/javascript">
        window.onload = function() {
        var bunic = document.body;
        var parinte = document.getElementById("parinte");
        var copil = document.getElementById("copil");
        bunic.addEventListener("click", function() {
            alert("BODY");
            bunic.className="alb"; });
        parinte.addEventListener("click", function() { 
            event.stopPropagation();
            alert("DIV");
            parinte.className="roz"; });
        copil.addEventListener("click", function() { 
            alert("P"); 
            copil.className="gal"; } );
        }
     </script>
  </head>
  <body id="bunic">
    <div id="parinte">div 
      <p id="copil">paragraf</p>
    </div>
  </body>  
</html>

Obiecte Event: METODE

```
event.stopImmediatePropagation()
```
dacă mai multe funcții listener sunt atașate aceluiași element, iar una conține event.stopImmediatePropagation(), funcțiile listener următoare nu mai sunt apelate

Event bubbling & capture

<!DOCTYPE html>
<html>
  <head>
     <link rel="stylesheet" href="demo.css">
     <style> 
       .alb{ background-color: white; 
             color: black; }
       .roz{ background-color: pink; }
       .gal{ background-color: yellow; }
       div{ border: 3px solid pink;
            width: 300px; height:300px; }
       p { border: 3px solid yellow; }
     </style>
     <script type="text/javascript">
        window.onload = function() {
        var bunic = document.body;
        var parinte = document.getElementById("parinte");
        var copil = document.getElementById("copil");
        bunic.addEventListener("click", function() {
            alert("BODY");
            bunic.className="alb"; }, true);
        parinte.addEventListener("click", function() { 
            alert("DIV");
            parinte.className="roz"; });
        copil.addEventListener("click", function() { 
            alert("Prima funcție"); 
            copil.className="gal"; } );
        copil.addEventListener("click", function() { 
            event.stopImmediatePropagation();
            alert("A doua funcție");} );
        copil.addEventListener("click", function() { 
            alert("A treia funcție");} );
        }
     </script>
  </head>
  <body id="bunic">
    <div id="parinte">div 
      <p id="copil">paragraf</p>
    </div>
  </body>  
</html>

Obiecte Event: METODE

```
event.preventDefault()
```
anulează acțiunea implicită a elementului

obiectul window: timers

```
window.setTimeout
```
apelează o funcție sau execută un fragment de cod după un anumit timp (milisecunde)

vt = setTimeout(numeFunctie, intarziere, parametri);
vt = setTimeout(function(){}, intarziere, parametri);

clearTimeout(vt) // anulare funcție lansată

- vt este variabilă globală pentru a putea fi vazută de metoda clearTimeout
- parametrii sunt ai funcției care se va executa (numeFunctie sau anonimă)

obiectul window: timers

```
window.setInterval
```
execută funcția în mod repetat, la un anumit interval de timp

vt = setInterval(numeFunctie, interval, parametri);
vt = setInterval(function(){}, interval, parametri);

clearInterval(vt) // anulare funcție lansată

obiectul window: timers

Probleme cu var

var i = 0;
el.onclick = function() {
               alert(i); /* evaluare la click; va afisa 1 */
             }
i = 1;

var i = 0;
{ 
  let il = i; // il e creat acum
  el.onclick = function(){
                 alert(il); /* va afișa 0 */ }
}// se eliberează zona; il = 0
i = 1;

Probleme cu var

la click pe o imagine din document să i se afișeze sursa

var imagini = document.getElementsByTagName("img");
for(var i = 0; i < imagini.length; i++)
    imagini[i].onclick = function() { alert(imagini[i].src);}
// nu funcționează
// i va fi egal cu imagini.length

// soluție
for(let i = 0; i < imagini.length; i++)
   imagini[i].onclick = function() { alert(imagini[i].src); }

obiectul window: timers

obiectul window: getComputedStyle()

window.getComputedStyle(ob, pseudoel)

determină stilul efectiv aplicat unui element
întoarce un obiect read-only CSSStyleDeclaration
pseudoel este opțional; pseudo-element sau null

var oStil = window.getComputedStyle(ob, ":after");
var x = oStil.color; // proprietatea css ob.style.color

window.getComputedStyle(ob,null).getPropertyValue("color");

obiectul window: ComputedStyle

obiectul window

fereastra browserului care conține DOM asociat documentului
poate fi selectat prin document.defaultView
dacă un document HTML conține elemente <iframe>, browserul creează un obiect window pentru documentul HTML și un obiect window suplimentar pentru fiecare <iframe>

Multiple windows

ferestrele iframe au proprietățile

contentWindow // obiectul window corespunzător iframe-ului
parent // fereastra părinte

// colorează backgroundul primului iframe roz
    
var x = document.getElementsByTagName("iframe")[0].contentWindow;
//x = obiectul window corespunzător primului iframe

x.document.getElementsByTagName("body")[0].style.backgroundColor = "pink";

obiectul window: location

window.location

folosit pentru a determina URL-ul paginii curente și pentru a redirecționa browserul către o pagină nouă

window.location.href // adresa URL a documentului
window.location.hostname // numele de domeniu al gazdei web
window.location.pathname /* calea și numele fișierului
                            paginii curente */
window.location.protocol /* protocolul folosit 
                            http: sau https: */
window.location.hash // partea din URL care începe cu #
window.location.assign(url) // încarcă un nou document

obiectul window: location

schimbarea locației

window.location.href="https://tinyurl.com/easter-bunny-history"

window.location="https://tinyurl.com/easter-bunny-history"

location="https://tinyurl.com/easter-bunny-history"

obiectul window: history

window.history

conține istoria browserului (adresele URL accesate de utilizator)

history.length // nr. de URL-uri din lista de istoric
history.back() /* încarcă adresa URL anterioară 
                  din lista de istoric */
history.forward() /* încarcă următoarea adresă URL 
                     din lista de istoric */
history.go(number/url) /* încarcă o adresă URL specificată 
                          din lista de istoric */

obiectul window: screen

window.screen

conține informații despre ecranul utilizatorului

screen.availHeight // înălțimea ecranului (excluzând taskbarul)
screen.availWidth // lățimea ecranului (excluzând taskbarul)
screen.height // înălțimea totală a ecranului
screen.width // lățimea totală a ecranului
screen.colorDepth
screen.pixelDepth /* nr. de biți folosiți pentru 
                    culoarea unui pixel */

obiectul window: open

window.open(URL, target, caracteristici)

deschide o nouă fereastră de browser
toți parametrii sunt opționali
dacă nu se specifică URL se va deschide o fereastră cu about-blank

window.open("https://tinyurl.com/water-ship-down", "_blank",
"toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,
width=400,height=400");

obiectul window: open

var myWindow=window.open();
myWindow.close();

închide fereastra deschisă cu metoda open()


                      ,@;@,
        ,@;@;@;@;@;@/ )@;@;
      ,;@;@;@;@;@;@|_/@' e\
     (|@;@:@\@;@;@;@:@(    \       întrebări?
       '@;@;@|@;@;@;@;'`"--'
        '@;@;/;@;/;@;' 
         ) //   | ||
         \ \\   | ||
          \ \\  ) \\ 
           `"`  `"``