55 lines
2.0 KiB
TeX
55 lines
2.0 KiB
TeX
|
\documentclass[a4paper,10pt]{article}
|
||
|
|
\usepackage{myXsim}
|
||
|
|
\usepackage{minted}
|
||
|
|
|
||
|
|
\author{Benjamin Bertrand}
|
||
|
|
\title{Interaction Homme machine sur le WEB- Cours}
|
||
|
|
\date{Mars 2023}
|
||
|
|
|
||
|
|
\pagestyle{empty}
|
||
|
|
|
||
|
|
\begin{document}
|
||
|
|
|
||
|
|
\maketitle
|
||
|
|
|
||
|
|
\setcounter{section}{2}
|
||
|
|
\section{Interaction et évènements}
|
||
|
|
|
||
|
|
\begin{definition}[Gestionnaire d'évènements]
|
||
|
|
Javascript permet grâce à l'interface DOM d'attacher une fonction gestionnaire d'événement à un élément d'un document HTML.
|
||
|
|
|
||
|
|
Ce gestionnaire est lié à un événement, qui est une action de l'utilisateur (déplacement de la souris, pression sur une touche du clavier) ou une modification d'un autre élément du document.
|
||
|
|
|
||
|
|
Lorsque l'événement ciblé atteint l'élément surveillé par le gestionnaire, celui-ci le capture et déclenche une action.
|
||
|
|
\end{definition}
|
||
|
|
|
||
|
|
\begin{propriete}[Attacher des évènemnets]
|
||
|
|
Pour attacher un gestionnaire d'événement nommé gestionnaire, à un élément, nommé \mintinline{js}{element}, et le lier à un événement, par exemple click, on peut procéder de deux façons :
|
||
|
|
\begin{itemize}
|
||
|
|
\item Directement dans le code HTML
|
||
|
|
|
||
|
|
\begin{minipage}{0.9\linewidth}
|
||
|
|
\begin{minted}[bgcolor=base3]{html}
|
||
|
|
<element id="id_element" onclick="fonction_a_realiser()"> ... </element>
|
||
|
|
\end{minted}
|
||
|
|
\end{minipage}
|
||
|
|
\item Dans le code javascript avec la méthode \mintinline{js}{addEventListener}
|
||
|
|
|
||
|
|
\begin{minipage}{0.9\linewidth}
|
||
|
|
\begin{minted}[bgcolor=base3]{js}
|
||
|
|
let v = document.getElementById("id_element");
|
||
|
|
v.addEventListener("click", fonction_a_realiser);
|
||
|
|
\end{minted}
|
||
|
|
\end{minipage}
|
||
|
|
|
||
|
|
\end{itemize}
|
||
|
|
\end{propriete}
|
||
|
|
|
||
|
|
\paragraph{Remarques: } Il existe de nombreuses type d'évènements que vous pouvez retrouver à l'adresse
|
||
|
|
\begin{center}
|
||
|
|
\url{https://developer.mozilla.org/fr/docs/Web/Events#listing_des_%C3%A9v%C3%A9nements}
|
||
|
|
\end{center}
|
||
|
|
|
||
|
|
|
||
|
|
\end{document}
|