Les événements de l'interface
Les événements de l'interface appartiennent à l'objet UiEvent qui hérite de l'objet Event.
W3School
Les événements de l'interface:
- load
- scroll
- resize
- select
Un élément est chargé
On va utiliser la méthode load de l'objet UiEvent.
La méthode load est déclenchée lorsque l'élément sur lequel elle a été placé est complètement chargé.
Démo
<body>
<h1 id=maintitre>L'image sera chargée...</h1>
<div ><img id=monimage src="../../image/anar.png"></div>
<div id=res></div>
<script>
var monimage=document.getElementById("monimage");
var res=document.querySelector("#res");
monimage.addEventListener("load",function(e){
res.innerHTML="L'image est (enfin) chargée...";
});
</script>
</body>
Le défilement
On va utiliser la méthode scroll de l'objet UiEvent.
La méthode scroll est déclenché uniquement s'il existe un scrolling possible, à l'élément sur lequel est placé l'écouteur d'événement il faut placer la commande overflow: scroll; dans la feuille de styles.
Démo
<head>
<style>
div#scrollable {
border: 1px solid black;
width: 200px;
height: 200px;
overflow: scroll;
}
</style>
<meta charset="utf-8">
</head>
<body>
<h1 id=maintitre>On scrolle à gogo...</h1>
<div id="scrollable">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent accumsan nulla ut posuere tempor. Suspendisse a sodales libero, et feugiat elit.
Fusce eget ullamcorper enim, sit amet maximus leo.
Vivamus vel laoreet tellus. Etiam facilisis mollis nunc eget feugiat.
</div>
<div id=res></div>
<script>
var doc=document.getElementById("scrollable");
var res=document.getElementById("res");
doc.addEventListener("scroll",aller);
function aller(e){
res.innerHTML+="ok";
}
</script>
</body>
