Fise de lucru JavaScrip - js6

Administrator Data inscrierii: 07/Dec/2013 Mesaje: 1103

Citat:

Evenimente Part 1

onblur, onfocus, onclick,ondblclick, onchange, onmouseup, onmousedown, onerror

onblur
Evenimentul onblur are loc atunci cand un obiect iese din centrul atentiei ex. cand s-a completat un camp text apoi s-a dat clic in afara lui se realizează evenimentul onblur pentru acel camp (campul text a iesit din centrul atentiei).
On - blur se poate traduce ca incetosare, pierderea claritatii.
In urmatorul exemplu la parasirea primului camp de editare se transforma literele mici in litere mari iar la parasirea celui de-al doilea camp se afiseaza id-ul campului respectiv.

<html>
<head><script type="text/javascript">

function upperCase()
{
var x=document.getElementById("fname").value;
document.getElementById("fname").value=x.toUpperCase();
}

</script></head>
<body>

Enter your name: <input type="text" id="fname" onblur="upperCase()">
Enter your age: <input type="text" id="age" onblur="alert(this.id)">

</body>
</html>

Iata cateva taguri asupra carora se aplica onblur

<a>, <area>, <b>, <blockquote>, <button>, <dd>, <div>, <dl>, <dt>, <form>, <frame>, <frameset>, <h1> to <h6>, <hr>, <i>, <iframe>, <img>, <input>, <li>, <object>, <ol>, <p>, <pre>, <select>, <span>, <table>, <td>, <textarea>, <tr>, <ul>
Si cateva obiecte button, checkbox, fileUpload, layer, frame, password, radio, reset, submit, text, textarea, window

onfocus

Evenimentul onfocus este opus evenimentului on blur. O traducere ar putea fi comutarea atentiei catre un obiect. In urmatorul exemplu in momentul in care se da clic in interiorul unei casete text (care "a intrat in centrul atentiei") se cauzează un eveniment – se modifica stilul, background-ul devine galben.
<html><head>

<script type="text/javascript">
function setStyle(x)
{
document.getElementById(x).style.background= "yellow";
}
</script></head>
<body>

First name: <input type="text" onfocus="setStyle(this.id)" id="fname">
Last name: <input type="text" onfocus="setStyle(this.id)" id="lname">

</body>
</html>

onchange

are loc atunci cand s-a modificat continutul unui camp, in acest caz, dupa ce a fost scris un sir in caseta text, sirul e transformat in majuscule. Se asemana cu onblur pentru casete text dupa ce a fost introdus un sir de caractere. Este util pentru validarea informatiilor introduse intr-un formular.

<html>
<head>
<script type="text/javascript">
function upperCase(x)
{
var y=document.getElementById(x).value;
document.getElementById(x).value=y.toUpperCase();
}
</script></head>

<body>
Enter your name:
<input type="text" id="fname"
onchange="upperCase(this.id)">
</body>
</html>

onclick

Evenimentul onclick are loc atunci cand se da clic pe un obiect. In acest exemplu cand se da clic pe buton se copie continutul primului camp in cel de-al doilea

<html>
<body>
Field1: <input type="text" id="field1" value="Hello World!">
Field2: <input type="text" id="field2">
Click the button below to copy the content of Field1 to Field2.
<button onclick= "document.getElementById('field2').value=
document.getElementById('field1').value">Copy Text</button>
</body>
</html>

ondblclick

la fel ca la onclick numai ca trateaza evenimentul dublu click.

Evenimentele onmousedown onmouseup
-sunt asemanatoare cu evenimentul onclick dar se refera la unul din cele doua situatii care apar la clic-ul de mouse –buton apasat si buton eliberat.

Exemplul urmator poate fi fixat si la evenimentul onclic si ne arata cum poate fi capturat un eveniment si cum poate fi aflat target-ul acelui eveniment.

<html><head>
<script type="text/javascript">
function whichElement(e)
{
var targ;
if (!e)
//daca e nu contine inca un eveniment capturat
{
//se captureaza evenimentul in e
var e=window.event;
}
if (e.target) //pentru mozila
{ targ=e.target;

//daca evenimentul e in mozila atunci capturam targetul cu //ajutorul proprietatii e.target si aceasta e capturata in targ
}
else if (e.srcElement) // pentru iexplore
{ targ=e.srcElement;

//daca evenimentul e in iexplore atunci are ca target
// proprietatea srcElement si aceasta e capturata tot in targ
}
var tname;
tname=targ.tagName;

//indiferent de browser elementul are proprietatea tagName
//care denumeste tag-ul si e stocata in variabila tname

alert("You clicked on a " + tname + " element.");
}
</script></head>

<body onmousedown="whichElement(event)">
<p> Dati click peste tot in document. O casuta alert va afisa tipul de element pe care ati dat click</p>

<h3>This is a header</h3>
<p>This is a paragraph</p>
<img border="0" src="ball16.gif" width="29" height="28" alt="Ball">
</body>
</html>

Modificati exemplul astfel incat sa functioneze si pentru onmouseup

Evenimentul onerror

Se produce cand apare o eroare
In exemplul urmator poza nu exista, nu poate fi incarcata iar pentru evenimentul onerror va fi lansata o actiune:

<html>
<body>

<img src="image.gif"
onerror="alert('Imaginea nu a fost incarcata.')">

<p>In acest exemplu exista o referire la o poză care nu exista si de accea lansam o avertizare</p>

</body>
</html>