<!DOCTYPE html>
<html>
<head>
<style>
#div-id {
cursor: pointer;
background-color: cornflowerblue;
width: 150px;
height: 30px;
padding: 20px;
}
</style>
</head>
<body>
<div id="div-id">addEventListener</div>
<script>
document.getElementById("div-id").addEventListener("dblclick", DblClickFunction);
document.getElementById("div-id").addEventListener("mouseout", MouseOutFunction);
document.getElementById("div-id").addEventListener("mouseover", MouseOverFunction);
function DblClickFunction()
{
document.getElementById("p-id").innerHTML += "DblClickFunction <br />";
}
function MouseOutFunction()
{
document.getElementById("p-id").innerHTML += "MouseOutFunction <br />";
}
function MouseOverFunction()
{
document.getElementById("p-id").innerHTML += "MouseOverFunction <br />";
}
/*
run:
MouseOverFunction
MouseOutFunction
MouseOverFunction
DblClickFunction
DblClickFunction
MouseOutFunction
MouseOverFunction
MouseOutFunction
...
*/
</script>
<p id="p-id"></p>
</body>
</html>
