uso di this [era: funzioni in javascript]

**uluzzu** · 31-08-2012, 16:37

Voglio creare l'effetto ombra al passaggio del mouse su un div e questo è il mio index.html:

codice:

<!DOCTYPE html>
<html lang="en">
	<head>
		<title></title>
		 <script>
		 function onMouseEnter() { 
			this.style.boxShadow='1px 1px #888888'; 
		} 
		function onMouseLeave() { 
			this.style.boxShadow='1px 1px #ffffff';
		} </script>
	</head>
	<body>
		<div class=menuitem onmouseover="onMouseEnter()" onmouseout="onMouseLeave()"> 
	</body>
</html>

In questo modo non funziona ma se, invece, tolgo le funzioni e metto direttamente

codice:

<div class=menuitem onmouseover="this.style.boxShadow='1px 1px #888888';" onmouseout="this.style.boxShadow='1px 1px #ffffff';">

funziona.
Perchè? In cosa sbaglio?

**cavicchiandrea** · 31-08-2012, 16:52

Dentro all'oggetto puoi usare this (questo) fuori devi usa un id per riferirti all'oggetto che vuoi modificare/manipolare/etc...

**uluzzu** · 01-09-2012, 09:06

Eh?

**br1** · 01-09-2012, 14:22

Originariamente inviato da cavicchiandrea
Se metti le istruzioni Dentro all'oggetto puoi usare this (questo) se le metti fuori (in una funzione) devi usare un id o ad altre forme di riferimento per riferirti all'oggetto che vuoi modificare/manipolare/etc...

Esempio esterno:

codice:

<!DOCTYPE html>
<html lang="en">
	<head>
		<title></title>
		 <script>
		 function onMouseEnter(obj) { 
			obj.style.boxShadow='1px 1px #888888'; 
		} 
		function onMouseLeave(obj) { 
			obj.style.boxShadow='1px 1px #ffffff';
		} </script>
	</head>
	<body>
		<div class=menuitem onmouseover="onMouseEnter(this)" onmouseout="onMouseLeave(this)"> 
	</body>
</html>

**carlomarx** · 03-09-2012, 17:05

Soluzione al volo (devi modificare solo questa riga nel tuo esempio!):

codice:

		<div class=menuitem onmouseover="onMouseEnter.call(this);" onmouseout="onMouseLeave.call(this);">

Spiegazione
succede perché gli eventi dichiarati inline (cioè come fai tu) sono considerati a loro volta delle funzioni.

se tu fai:

codice:

<tuoElemento onmouseover="funzione();">

è come se facessi così:

codice:

function mouseover () {
  // qui dentro viene passato l'oggetto this, che però non verrà passato anche a funzione() !!!
  funzione ();
}

tuoElemento.onmouseover = mouseover;

Di conseguenza, o usi alternative all'oggetto this, oppure assegni l'evento via codice. Così:

codice:

tuoElemento.onmouseover = funzione; // in questo caso a "funzione()" verrà passato l'elemento this!!

Spero ti sia chiaro.

Discussione: uso di this [era: funzioni in javascript]

Strumenti discussione

Ricerca discussione

Visualizza

funzioni in javascript

Permessi di invio