Maison > Article > interface Web > Résumé des événements de fonction

Résumé des événements de fonction

jackloveoriginal: 2018-05-21 15:42:341474parcourir

Vous rencontrerez de nombreux événements de fonction lors de l'apprentissage des fonctions. Cet article les expliquera en détail.

Qu'est-ce qu'un événement ?

L'interaction entre JavaScript et HTML se fait via des événements. Les événements sont des moments d'interaction spécifiques qui se produisent dans un document ou une fenêtre de navigateur. Vous pouvez utiliser des écouteurs (ou des gestionnaires) pour planifier des événements afin que le code approprié soit exécuté lorsque l'événement se produit. Ce modèle, connu en génie logiciel traditionnel sous le nom de modèle Observer, prend en charge un couplage lâche entre le comportement de la page (JavaScript) et l'apparence de la page (HTML et CSS).

Flux d'événements

Le flux d'événements décrit l'ordre dans lequel les événements sont reçus de la page. Supposons le code suivant :

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body>
    <div id="div1"></div></body></html>

Cliquez sur le div. Ce clic se produira non seulement sur le div, mais son corps de conteneur parent sera également cliqué. Alors, sur qui a été cliqué en premier ou comment l’événement s’est-il propagé ? Le flux d'événements décrit une telle séquence d'événements.

Flux d'événements IE (bullage d'événements)

Le flux d'événements IE est également appelé bouillonnement d'événements, c'est-à-dire que l'événement est reçu par l'élément le plus spécifique (le nœud avec le niveau d'imbrication le plus profond dans le document) au démarrage, puis propagé étape par étape vers des nœuds moins spécifiques (documents).
En prenant comme exemple le code ci-dessus, si vous cliquez sur l'élément div, alors l'événement click sera propagé dans l'ordre suivant :

1.<div>
2.<body>
3.<html>
4.document

C'est-à-dire que le clic L'événement se produit d'abord dans l'élément div, et cet élément est l'élément sur lequel nous avons cliqué, puis l'événement click se propage vers le haut le long de l'arborescence DOM, se produisant à chaque niveau de nœud jusqu'à ce qu'il se propage à l'objet document.

Tous les navigateurs modernes prennent en charge le bouillonnement d'événements, mais il existe quelques différences. La diffusion d'événements dans IE5.5 et les versions antérieures ignore l'élément HTML et passe directement du corps au document. IE9, Firefox, Chrome et Safari diffusent l'événement jusqu'à l'objet fenêtre. (Les anciens navigateurs IE ne prennent en charge que le bouillonnement d'événements).

Capture d'événements

L'idée de la capture d'événements est que les nœuds moins spécifiques devraient recevoir les événements plus tôt et que les nœuds spécifiques devraient recevoir les événements en dernier, ce qui est exactement le contraire du bouillonnement d'événements, et au-dessus Prenons l'exemple ci-dessus comme exemple. Cliquez sur un div. La séquence de déclenchement de l'événement de capture d'événement est la suivante :

1.document
2.<html>
3.<body>
4.<div>

Pendant le processus de capture d'événement, l'objet document reçoit d'abord l'événement de clic. , puis l'événement se déplace le long de l'arborescence DOM en séquence, jusqu'à la cible réelle de l'événement.

IE9, Firefox, Chrome, Safari et Opera prennent tous en charge la capture d'événements. Bien que la spécification d'événement au niveau DOM2 exige que les événements commencent à se propager à partir de l'objet document, ces navigateurs commencent à capturer les événements à partir de l'objet window.

Flux d'événements DOM

Le flux d'événements spécifié par les événements de niveau DOM2 comprend trois étapes : l'étape de capture d'événement, l'étape cible et l'étape de bouillonnement d'événement. La première chose qui se produit est la capture d'événement, offrant la possibilité d'intercepter l'événement. Ensuite, la cible réelle reçoit l'événement. La phase finale est la phase bouillonnante, où vous pouvez réagir aux événements.

Dans le flux d'événements DOM, la cible réelle ne recevra pas d'événements pendant la phase de capture. Cela signifie que pendant la phase de capture, les événements du document au HTML en passant par le corps sont arrêtés. L'étape suivante se situe dans l'étape cible, donc l'événement se produit sur le div et est considéré comme faisant partie de l'étape de bouillonnement dans la gestion des événements. Ensuite, la phase de bouillonnement se produit et l'événement est retransmis au ducument.
Mais en fait, IE9, Firefox, Chrome, Safari et Opera9.5 et supérieur déclencheront des événements sur l'objet événement pendant la phase de capture. Le résultat est qu'il existe deux possibilités de manipuler des événements sur l'objet cible. (IE8 et les versions antérieures ne prennent pas en charge le streaming d'événements DOM).

Gestionnaire d'événements

Un événement est une action effectuée par l'utilisateur ou le navigateur lui-même. Des éléments comme le clic, le chargement et le survol de la souris sont tous des noms d'événements. La fonction qui répond à un événement est appelée gestionnaire d'événements (écouteur d'événements). Le nom du gestionnaire d'événements commence par "on", donc le gestionnaire d'événements pour l'événement click est onclick et le gestionnaire pour l'événement load est onload. Il existe plusieurs manières de spécifier des gestionnaires d'événements.

Gestionnaires d'événements HTML

Chaque événement pris en charge par un élément peut être spécifié à l'aide d'un attribut HTML portant le même nom que le gestionnaire d'événements correspondant. La valeur de cet attribut doit être du code JavaScript exécutable, exemple :

<button id="myButton" onclick="alert(&#39;Clicked&#39;)">Click Me</button>//定义了一个按钮，点击时会显示一个警告框；

La définition de gestionnaires d'événements en HTML peut contenir des actions spécifiques à effectuer, ou elle peut appeler des scripts définis ailleurs sur la page, exemple :

<button id="myButton" onclick="showMsg()">Click Me</button>  //点击按钮就会调用showMsg()函数；<script>
    function showMsg() {
      alert(&#39;Hello world!&#39;)
}</script>

Spécifier les gestionnaires d'événements via HTML présente deux inconvénients : 1. Problème de décalage horaire, car l'utilisateur peut déclencher l'événement correspondant dès que l'élément HTML apparaît sur la page, mais le gestionnaire d'événements ne peut pas être disponible pour le moment. Il n'y a aucune condition d'exécution ; 2. Les codes HTML et JavaScript sont étroitement couplés. Si vous souhaitez modifier le gestionnaire d'événements, vous devez modifier le code HTML et le code JavaScript.

Gestionnaire d'événements DOM niveau 0

La manière traditionnelle de spécifier un gestionnaire d'événements via JavaScript consiste à attribuer une fonction à un attribut de gestionnaire d'événements. Chaque élément possède son propre attribut de gestionnaire d'événements, qui est généralement entièrement en minuscules, comme onclick. En définissant la valeur de cet attribut sur une fonction, vous pouvez spécifier un gestionnaire d'événements, exemple :

 var btn = document.getElementById(&#39;myButton&#39;);
  btn.onclick = function() {
    alert("Clicked")
  }

使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此，这时候事件处理程序是在元素的作用域中运行；换句话说，程序中的this引用当前元素。
也可以通过DOM0级方法删除事件处理程序，示例：

btn.onclick = null;   //删除事件处理程序；
DOM2级事件处理程序

DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点都包含这两个方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后的布尔值如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。示例：

 var btn = document.getElementById(&#39;myButton&#39;);  //为按钮添加了click事件和处理程序；
  btn.addEventListener(&#39;click&#39;,function() {
    alert(this.id)
  }，false)

与DOM0级方法一样，这里添加的事件处理程序也是在其依附的元素的作用域中运行的。使用DOM2级方法添加事件处理程序可以添加多个事件处理程序，示例：

 var btn = document.getElementById(&#39;myButton&#39;);  //为按钮添加了多个click事件和处理程序；
  btn.addEventListener(&#39;click&#39;,function() {
    alert(this.id);
  }，false);  var btn = document.getElementById(&#39;myButton&#39;);  ；
  btn.addEventListener(&#39;click&#39;,function() {
    alert(&#39;hello world!&#39;);
  }，false);

这里为按钮添加了2个事件处理程序。这两个事件处理程序会按照添加它们的顺序触发。
通过addEventListener()添加的事件处理程序只能用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同，意味着addEventListener()添加的匿名函数无法移除：

//该代码无法运行；btn.removeEventListener(&#39;click&#39;,function() {
  alert(this.id);
}，false);
//该代码工作正常；//removeEventListener()和addEventListener()使用了相同函数；var btn = document.getElementById(&#39;myButton&#39;); 
  var function handler() {
    alert(this.id);
  }
btn.addEventListener(&#39;click&#39;,handler,false);
btn.removeEventListener(&#39;click&#39;,handler,false);

本篇对js事件进行了总结，更多相关内容请关注php中文网。

Articles Liés

Voir plus