Per incapsulare bene il mio codice del drag-drop mi serve che la funzione evochi un evento.
Poi sta al programma ascoltare o meno l'evento.
Mi serve approfondire gli eventi.
Ecco costruito faticosamente un codice per la creazione di un evento e di un listener:
<html>
<head>
<script type="text/javascript">
function simulaClick(){
var evento=document.createEvent("MouseEvents");
evento.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null)
event.target.dispatchEvent(evento)
}
function load(){
var elemento=document.getElementById("uno");
elemento.addEventListener("click",function(){alert("evento")},true);
}
</script>
</head>
<body onLoad="load()">
<div id="uno" style="background:green;width:100px;height:100px"></div>
</body>
</html>
Non ci ho poi capito molto: l'unica cosa che ho capito è che con la funzione simulaClick viene creato un evento, e che con la funzione load, che viene chiamata all'atto del caricamento del documento, si attribuisce l'ascoltatore dell'evento al div chiamato "uno".Funziona.
Ora creo due DIV e attribuisco l'ascoltatore all'uno o all'altro...
<html>
<head>
<script type="text/javascript">
function simulaClick(){
var evento=document.createEvent("MouseEvents");
evento.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null)
event.target.dispatchEvent(evento)
}
function load(){
var elemento=document.getElementById("uno");
elemento.addEventListener("click",function(){alert("evento")},true);
}
</script>
</head>
<body onLoad="load()">
<div id="uno" style="background:green;width:100px;height:100px"></div>
<div id="due" style="background:cyan;width:200px;height:100px;position:absolute;left:200px;top:10px"></div>
</body>
</html>
Ecco, ora ho messo un altro DIV. L'ascoltatore è sempre attribuito al DIV "uno".Ora lo attribuisco solo al DIV "due".
<html>
<head>
<script type="text/javascript">
function simulaClick(){
var evento=document.createEvent("MouseEvents");
evento.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null)
event.target.dispatchEvent(evento)
}
function load(){
var elemento=document.getElementById("due");
elemento.addEventListener("click",function(){alert("evento")},true);
}
</script>
</head>
<body onLoad="load()">
<div id="uno" style="background:green;width:100px;height:100px"></div>
<div id="due" style="background:cyan;width:200px;height:100px;position:absolute;left:200px;top:10px"></div>
</body>
</html>
E in effetti, adesso funziona solo se clicco sul DIV "due".Ora lo attribuisco a tutti e due:
<html>
<head>
<script type="text/javascript">
function simulaClick(){
var evento=document.createEvent("MouseEvents");
evento.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null)
event.target.dispatchEvent(evento)
}
function load(){
var elemento=document.getElementById("uno");
elemento.addEventListener("click",function(){alert("evento")},true);
var elemento=document.getElementById("due");
elemento.addEventListener("click",function(){alert("evento")},true);
}
</script>
</head>
<body onLoad="load()">
<div id="uno" style="background:green;width:100px;height:100px"></div>
<div id="due" style="background:cyan;width:200px;height:100px;position:absolute;left:200px;top:10px"></div>
</body>
</html>
S', funziona!Inizio a capire qualcosina... ancora poco ma si amplierà!
Nessun commento:
Posta un commento