Claudia Chiriță . 2023/2024
obiect.onclick = function(){cod JavaScript};
obiect.onclick = nume-functie-js;
element.onclick = function(e){}
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 */
click, dblclick
mouseover, mouseout
mousedown, mouseup
mouseleave
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 */
keydown, keyup
keypress // deprecated!
event.key // tasta apasată
event.altKey // boolean
event.ctrlKey // boolean
event.keyCode, event.which // deprecated!
// addEventListener(type, listener, useCapture)
el.addEventListener("click", handleClick, false)
// removeEventListener(type, listener, useCapture)
el.removeEventListener("click", handleClick, true)
var b = document.getElementById("buton");
// b.onclick = function(){ alert("Hello, bunny!"); }
b.addEventListener("click",
function(){alert("Hello, bunny!");},
false)
// 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); } )
false // BUBLLING (implicit)
true // CAPTURING
![]() |
E1, E2: handlere pentru onclick eveniment: click pe E2 modele de executie: CAPTURING - handler E1, handler E2 BUBBLING - handler E2, handler E1 |
event.stopPropagation()
oprește propagarea evenimentului în DOM
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.preventDefault()
anulează acțiunea implicită a elementului
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
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ă
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;
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); }
window.getComputedStyle(ob, pseudoel)
var oStil = window.getComputedStyle(ob, ":after");
var x = oStil.color; // proprietatea css ob.style.color
window.getComputedStyle(ob,null).getPropertyValue("color");
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";
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
window.location.href="https://tinyurl.com/easter-bunny-history"
window.location="https://tinyurl.com/easter-bunny-history"
location="https://tinyurl.com/easter-bunny-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 */
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 */
window.open(URL, target, caracteristici)
window.open("https://tinyurl.com/water-ship-down", "_blank",
"toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,
width=400,height=400");
var myWindow=window.open();
myWindow.close();
închide fereastra deschisă cu metoda open()
,@;@,
,@;@;@;@;@;@/ )@;@;
,;@;@;@;@;@;@|_/@' e\
(|@;@:@\@;@;@;@:@( \ întrebări?
'@;@;@|@;@;@;@;'`"--'
'@;@;/;@;/;@;'
) // | ||
\ \\ | ||
\ \\ ) \\
`"` `"``