\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}
