A pro di addEventListener .......

**whisher** · 04-08-2006, 08:56

Ciao.
Voglio passare ad una gestione + avanzata
degli eventi ma sono incastrato su un semplice script (2 righe

)
Prima facevo una cosa del genere:

Codice PHP:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript" language="javascript">

openLink=function()

{

        var div=document.getElementById('testdiv');



        div.onclick=function(){



              alert('Reacting to Event bubble phase');



         }

}

window.onload=openLink;

    </script>

</head>



<body>

    <div id="testdiv">



    

[url="#"]Click here activate the alert method[/url]</p>



    </div>

</body>

</html>

Adesso almeno su Firefox dovrei fare una cosa del
genere :

Codice PHP:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script language="javascript">

alertBox=function()

    {

        alert('Reacting to Event bubble phase');

    }

    var div=document.getElementById('testdiv');

    div.addEventListener('click',alertBox,false);

</script>

</head>

<body>

    <div id="testdiv">

        [url="#"]Click here activate the alert method[/url]

    </div>

</body>

</html>

Ma non funziona

(( mi sapete spiegare dove sbaglio ?
Ho provato anche a fare una cosa del genere ma l'evento
scatta nell'intero body:

Codice PHP:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html> <head> <title>Untitled Document</title> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<script language="javascript"> 

alertBox = function () 

{ 

    alert('caught click'); 

} 

function myClickListener(event) 

{ 

    if (document.addEventListener) 

    { 

        document.addEventListener('click', event, false); 

    } 

    else 

    { 

        document.attachEvent('onclick', event); 

    } 

} 

window.onload = myClickListener(alertBox); 

</script> 

</head> 

<body>  

<div id="testdiv">  

[url="#"]Click here activate the alert method[/url]  

</div> 

</body> 

</html>

Ciao

**andr3a** · 04-08-2006, 09:40

codice:

...
    var div=document.getElementById('testdiv');
    div.addEventListener('click',alertBox,false);
</script>
</head>
<body>
    <div id="testdiv"> ...

guarda che finchè il div non è presente sulla pagina document.getElementById non serve a niente perchè non c'è ....

inoltre quando assegni un evento non puoi usare le parentesi o inviare paramentri ...

codice:

window.onload = myClickListener(alertBox);

scrivendo questo hai:
1 - richiamato immediatamente la funzione myClickListener
2 - assegnato al metodo onload il risultato di tale funzione

codice:

function alertBox() {
	alert('Reacting to Event bubble phase')
};
function addMyEvent() {
	document.getElementById("testdiv").addEventListener("click", alertBox, false); 
};
onload = addMyEvent; // non richiami la funzione, la assegni

... o se preferisci ...

codice:

function alertBox() {alert('Reacting to Event bubble phase')};
onload = function() {
	document.getElementById("testdiv").addEventListener("click", alertBox, false); 
};

**whisher** · 04-08-2006, 09:53

E si si si dopo aver picchiato
la testa mi ero proprio accorto
che il div non c'era debug con alert
NULL.
Ti ringrazio molto della dettagliata spiegazione
adesso me la studio bene avevo risolto
così:

Codice PHP:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html> <head> <title>Untitled Document</title> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<script language="javascript"> 

function alertBox () 

{ 

    alert('caught click'); 

} 



window.onload = function()

{

    if (document.addEventListener) 

    { 

        document.getElementById('testdiv').addEventListener('click',alertBox , false); 

    } 

    else 

    { 

        document.getElementById('testdiv').attachEvent('onclick', alertBox); 

    } 

}

</script> 

</head> 

<body>  

<div id="testdiv">  

[url="#"]Click here activate the alert method[/url]  

</div> 

</body> 

</html>

Come avevi suggerito tu.
Grazie ancora.
Stammi bene.

**andr3a** · 04-08-2006, 10:03

codice:

function DOMize(element) {
	if(!element.addEventListener){element.addEventListener=function(event,listener){
		event="on"+event;
		if(this.attachEvent)	this.attachEvent(event,listener);
		else 			this[event]=listener;
	}};
	if(!element.removeEventListener){element.removeEventListener=function(event,listener){
		event="on"+event;
		if(this.detachEvent)	this.detachEvent(event,listener);
		else 			delete this[event];
	}};
	return element;
};


function alertBox() {
	alert('Reacting to Event bubble phase');
};
onload = function() {
	DOMize(document.getElementById("testdiv")).addEventListener("click", alertBox, false); 
};

**whisher** · 04-08-2006, 19:29

Un bijou thanks so much

Stammi bene.

Discussione: A pro di addEventListener .......

Strumenti discussione

Ricerca discussione

Visualizza

A pro di addEventListener .......

.........

..........

Permessi di invio