AS
Javascript
Event Attachment
Ormai da anni è buona norma associare le funzioni Javascript ai vari eventi con addEventListener anziché attraverso la scrittura in linea tipo onclick="function();".
In questo esempio la funzione clickFunct viene chiamata dal click e le funzioni mouseOverFunct e mouseOutFunct al passaggio del mouse effettuati all'interno dell'elemento id="divId".
Nel primo box il codice completo HTML/Javascript. Nel secondo box il risultato.
<!DOCTYPE html>
<html>
<head>
<script>
function clickFunct()
{
var a;
a = document.getElementById("counterId").innerHTML;
document.getElementById("counterId").innerHTML = parseInt(a, 10 ) + 1;
}
function mouseOverFunct()
{
document.getElementById("divId").style.color="white";
}
function mouseOutFunct()
{
document.getElementById("divId").style.color="inherit";
}
</script>
</head>
<body>
<div id="divId" style="cursor:pointer;">Click here</div>
<script>
if (document.addEventListener)
{
document.getElementById("divId").addEventListener("click", clickFunct);
document.getElementById("divId").addEventListener("mouseover", mouseOverFunct);
document.getElementById("divId").addEventListener("mouseout", mouseOutFunct);
}
else// evtl for cross browser support
if(document.attachEvent)
{
document.getElementById("divId").attachEvent("onclick", clickFunct);
document.getElementById("divId").attachEvent("onmouseover", mouseOverFunct);
document.getElementById("divId").attachEvent("onmouseout", mouseOutFunct);
}
</script>
</body>
</html>
Click here
0
Passare una variabile a una funzione richiamata da addEventListener
<!DOCTYPE html>
<head>
<script>
function functWithVar(inputId)
{
var tmp;
tmp = document.getElementById(inputId).innerHTML;
document.getElementById("outputId").innerHTML = "You have clicked the " + tmp;
}
</script>
</head>
<body>
Click one of the following:
<ul>
<li id="aId" style="cursor:pointer;">A</li>
<li id="bId" style="cursor:pointer;">B</li>
<li id="cId" style="cursor:pointer;">C</li>
</ul>
<div id="outputId">...</div>
<script>
document.getElementById("aId").addEventListener("click", function(){functWithVar(this.id);});
document.getElementById("bId").addEventListener("click", function(){functWithVar(this.id);});
document.getElementById("cId").addEventListener("click", function(){functWithVar(this.id);});
</script>
</body>
</html>
Click one of the following:
  • A
  • B
  • C
...
indietro