Informatique


L'interface (UiEvent)

Aller à

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>