L'interaction entre JS et HTML se réalise à travers 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. Connu sous le nom de modèle Observer dans le génie logiciel traditionnel, il prend en charge un couplage lâche entre le comportement de la page et son apparence.
Flux d'événements
Le flux d'événements décrit l'ordre dans lequel les événements sont reçus de la page.
Bullissement d'événement
L'événement est initialement reçu par l'élément le plus spécifique (le nœud ayant le niveau d'imbrication le plus profond dans le document), et puis un par un, les niveaux sont propagés vers le haut vers des nœuds (documents) moins spécifiques. Prenez la page HTML suivante comme exemple. Si vous cliquez sur un bouton de la page, l'événement "clic" sera propagé dans l'ordre < bouton>, < En d'autres termes, la diffusion d'événements signifie que l'événement se propage vers le haut le long de l'arborescence DOM, depuis l'élément sous-jacent qui a déclenché l'événement jusqu'à l'objet document.
<html> <head> <title>Test</title> </head> <body> <button id="myBtn">A Btn</button> </body> </html>
Capture d'événement
Contrairement à l'idée de bouillonnement d'événement, l'idée de capture d'événements Les nœuds moins spécifiques devraient recevoir les événements plus tôt et les nœuds les plus spécifiques devraient recevoir les événements en dernier. Toujours dans l'exemple ci-dessus, après avoir cliqué sur le bouton de la page, l'événement "clic" sera propagé dans l'ordre du document, < html>, < En d'autres termes, la capture d'événement signifie que l'événement se propage vers le bas le long de l'arborescence DOM depuis l'objet document jusqu'à l'élément cible réel de l'événement.
Flux d'événements DOM
Les événements spécifiés par « Événements de niveau DOM2 » comprennent trois étapes : l'étape de capture d'événement, l'étape cible et le risque d'événement stade de bulle. La première chose qui se produit est la capture d'événement, qui offre 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.
Toujours en prenant comme exemple le clic de bouton précédent, dans le flux d'événements DOM, pendant la phase de capture, l'événement "click" démarre à partir du document et est transmis à l'élément body (notez que la cible réelle (le bouton ne le recevra pas pendant l'événement de phase de capture). Dans la phase cible, l'élément bouton reçoit l'événement "clic". Enfin, lors de la phase de bouillonnement, l'événement est propagé au document.
Gestionnaire d'événements
Un événement est une certaine action effectuée par l'utilisateur ou le navigateur lui-même, et la fonction qui répond à un événement est appelée gestionnaire d'événements ou événement dispositif d'écoute.
Gestionnaire d'événements HTML
Le gestionnaire d'événements HTML fait ici référence aux événements définis directement dans les éléments HTML via le gestionnaire d'attributs, voir l'exemple de code ci-dessous. . Dans ce cas, le gestionnaire d'événements créera une fonction qui encapsule la valeur d'attribut de l'élément, et cette valeur est égale à l'élément cible de l'événement. Spécifier les gestionnaires d'événements de cette manière présente plusieurs inconvénients et n'est pas recommandé.
<button onclick="alert('HaHa~')">Btn-1</button>
<button onclick="alert('event.type')">Btn-2</button>
<button onclick="handler()">Btn-3</button>
<script type="text/javascript">
function handler() {
alert("Haha~");
}
</script>Gestionnaire d'événements DOM niveau 0
La manière traditionnelle de spécifier les gestionnaires d'événements via JS Attribuez simplement une fonction à une propriété de gestionnaire d'événements, veuillez consulter l'exemple de code ci-dessous. Les gestionnaires d'événements spécifiés de cette manière s'exécutent dans la portée de l'élément, ceci faisant référence à l'élément actuel. Les gestionnaires d'événements ajoutés de cette manière seront traités pendant la phase de bouillonnement du flux d'événements. Si vous souhaitez supprimer l'événement, définissez simplement la valeur de onclick sur vide.
var btn = document.getElementById("myBtn");
btn.onclick = function() {
console.log("this.id"); // "myBtn"
};
// 删除事件处理程序
btn.onclick = null;Gestionnaire d'événements de niveau DOM2
"Événement de niveau DOM2" définit deux méthodes de spécification et suppression des gestionnaires d'événements, addEventListener() et removeEventListener(). Ces deux méthodes sont incluses dans tous les nœuds DOM. Les deux méthodes reçoivent 3 paramètres, l'événement à traiter, la fonction de traitement et la valeur booléenne. La valeur booléenne finale est true pour appeler le gestionnaire d'événements pendant la phase de capture, et false pour appeler le gestionnaire d'événements pendant la phase de bouillonnement. Comme les méthodes de niveau DOM0, le gestionnaire d'événements ajouté ici s'exécute également dans la portée de l'élément auquel il est attaché. L'avantage de l'ajout de gestionnaires d'événements à l'aide de la méthode de niveau DOM2 est que plusieurs gestionnaires d'événements peuvent être ajoutés. Ces gestionnaires d'événements sont déclenchés dans l'ordre dans lequel ils ont été ajoutés. Voici un exemple de code :
var btn = document.getElementById("myBtn");
// 添加，触发点击事件时先输出"myBtn"再输出"HaHa~"
btn.addEventListener("click", function() {
console.log(this.id);
}, false);
btn.addEventListener("click", function() {
console.log("HaHa~");
}, false);Les événements ajoutés via addEventListener() ne peuvent être supprimés que via removeEventListener(). Les paramètres transmis lors de la suppression doivent être cohérents avec les paramètres utilisés lors de l'ajout. Cela signifie également que la fonction anonyme ajoutée via addEventListener() ne peut pas être supprimée, car la fonction anonyme passée lors de l'ajout ne peut pas être transmise à removeEventListener(). Même si une fonction identique est écrite lors de la suppression, cette fonction n'est qu'une nouvelle fonction anonyme. Veuillez consulter l'exemple de code suivant :
var btn = document.getElementById("myBtn");
// 无法删除匿名函数
btn.addEventListener("click", function() {
console.log(this.id);
}, false);
btn.removeEventListener("click", function() {
console.log(this.id);
}, false);
// 正确的添加和删除方式
function handler() {
console.log(this.id);
}
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。最好只在需要在事件到达目标之前截获它的时候才将事件处理程序添加到捕获阶段。JS高级程序设计上给出的建议是，如果不是特别需要，不建议在事件捕获阶段注册事件处理程序。
IE事件处理程序
IE实现了与DOM中类似的两个方法: attachEvent()和deleteEvent()。这两个方法接收两个参数，事件处理程序名称和事件处理程序。注意，第一个参数是事件处理程序名称而不是事件名称，也就是说在注册点击事件的处理程序时应该传入”onclick”而不是”click”，这里跟DOM的方法有些差别。另外，这两个方法注册的事件处理程序是在全局作用域中运行而不是元素作用域，this的值指向window。还有一点需要特别小心，通过attachEvent()方法也可以添加多个事件处理程序，但是它们的执行顺序却不是按照它们被添加的顺序，而是完全相反，跟DOM方法截然不同。突然觉得IE真的特别反人类~~~下面是代码示例：
var btn = document.getElementById("myBtn");
function handler1() { // ... }
function handler2() { // ... }
// 添加，触发点击事件时先执行handler2再执行handler1
btn.attachEvent("onclick", handler1);
btn.attachEvent("onclick", handler2);
// 删除
btn.deleteEvent("onclick", handler1);
btn.deleteEvent("onclick", handler2);Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
