Functia addEventListener

Functia ataseaza unui obiect un “listener” care va apela o functie cand un anumit eveniment este declansat.

objTest.addEventListener(‘click’, onClickHandler);

Exemplu de mai sus ataseaza obiectului objTest un “listener” care, atunci cand apasam pe obiectul objTest, apeleaza functia onClickHandler, in interiorul caruia se poate trata sau nu evenimentul. Primul parametru este de tip String si defineste tipul evenimentului, iar al doilea este de tip Function si este reprezentat de o functie care este apelata cand se declanseaza evenimentul.
In afara de primii 2 parametri, care sunt si obligatorii, mai exista inca 3 care au valori prestabilite, si pot fi, sau nu, mentionati in apelul functiei.

Al 3-lea parametru, numit si useCapture, este de tip Boolean si are valoarea initiala false. Pentru a intelege rolul acestui parametru trebuie intelese care sunt fazele prin care trece un eveniment. De la declansare, un eveniment trece prin 3 faze (in ordine cronologica):

  1. bubbling phase,
  2. target phase,
  3. capturing phase.

Daca valoarea parametrului useCapture este false (valoare initiala), atunci evenimentul va fi capturat in capturing phase, iar daca useCapture este true evenimentul va fi capturat in bubbling phase.

Ex 1:
addEventListener(‘click’, onClickHandler1, false);
objTest.addEventListener(‘click’, onClickHandler2);
function onClickHandler1(e):void{
trace(“eveniment declansat pe scena“)
}
function onClickHandler2(e):void{
trace(“eveniment declansat in obiectul objTest“)
}
//rezultat:
//eveniment declansat in obiectul objTest
//eveniment declansat pe scena

Ex 2:
addEventListener(‘click’, onClickHandler1, true);
objTest.addEventListener(‘click’, onClickHandler2);
function onClickHandler1(e):void{
trace(“eveniment declansat pe scena“)
}
function onClickHandler2(e):void{
trace(“eveniment declansat in obiectul objTest“)
}
//rezultat:
//eveniment declansat pe scena
//eveniment declansat in obiectul objTest

mai multe: Advanced event registration models

Event order

Exemplu:
var el = document.createElement(“input“);
AttachEvents(el,”change“,DoSomething,false,idx);

function AttachEvents(obj,evt,fnc,useCapture, idx){
evt = evt.toLowerCase();
if (obj.addEventListener){
obj.addEventListener(evt,fnc,useCapture);obj.idx=idx;
}else if(obj.attachEvent){
obj.attachEvent(‘on’+evt,fnc); obj.idx=idx;
}
return true;
}

function DoSomething(obj){
// “target” for Mozilla, Netscape, Firefox et al. ; “srcElement” for IE
prop_var = “idx“; prop = “target“;
if(navigator.appName == “Microsoft Internet Explorer“) {prop = “srcElement“;}
idx = obj[prop][prop_var];
textBox = document.getElementById(idx);
}

Prevent Refresh (disable the F5 key )

“<body onkeydown=”PreventRefresh(event)”></body >”

function PreventRefresh(e) {
var key;//IE
if(window.event){
key = window.event.keyCode;
if (key == 116){//keycode for F5 function
e.keyCode = 0;e.returnValue = false;
e.cancelBubble = true;
return false;
}
}
//firefox
else{
key = e.which;
if (key == 116){
e.stopPropagation();
e.preventDefault();
return false;
}
}
}

More about events in javascript: Introduction to Events

Window size and scrolling

function alertSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == ‘number’ ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in ‘standards compliant mode’
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
window.alert( ‘Width = ‘ + myWidth );
window.alert( ‘Height = ‘ + myHeight );
}

The following script will obtain the scrolling offsets:

function getScrollXY() {
var scrOfX = 0, scrOfY = 0;
if( typeof( window.pageYOffset ) == ‘number’ ) {
//Netscape compliant
scrOfY = window.pageYOffset;
scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
//DOM compliant
scrOfY = document.body.scrollTop;
scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
//IE6 standards compliant mode
scrOfY = document.documentElement.scrollTop;
scrOfX = document.documentElement.scrollLeft;
}
return [ scrOfX, scrOfY ];
}

source: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow