interface Web
js tutoriel
Résumé des flux d'événements, des gestionnaires et des objets dans l'apprentissage d'événements JavaScript
Résumé des flux d'événements, des gestionnaires et des objets dans l'apprentissage d'événements JavaScript
1. Flux d'événements
Le flux d'événements décrit l'ordre dans lequel les événements sont reçus de la page.
Bouillonnement 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), puis se propage vers le haut vers des nœuds moins spécifiques (le document). 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énements
Contrairement à l'idée de bouillonnement d'événements, l'idée de capture d'événements est que les nœuds moins spécifiques devraient recevoir les événements plus tôt, et le plus résultats spécifiques Les points 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 l'étape de bouillonnement d'événement. 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.
En prenant le clic de bouton précédent comme exemple, 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 le bouton cible réel ne recevra pas l'événement pendant la 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.
2. 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 écouteur d'événements.
Gestionnaire d'événements HTML
Le gestionnaire d'événements HTML fait ici référence au gestionnaire d'événements défini directement dans l'élément HTML via l'attribut (attribut), veuillez consulter l'exemple de code suivant. 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 un gestionnaire d'événements via JS consiste à attribuer une fonction à un attribut 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 au niveau DOM2
"Événement au niveau DOM2" définit deux méthodes pour spécifier et supprimer les 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 signifie que le gestionnaire d'événements est appelé pendant la phase de capture lorsqu'il est vrai, et faux lorsque le gestionnaire d'événements est appelé 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 vous pouvez ajouter plusieurs gestionnaires d'événements. 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);Dans la plupart des cas, les gestionnaires d'événements sont ajoutés à l'étape de bouillonnement du flux d'événements, afin de maximiser la compatibilité avec différents navigateurs. Il est préférable d'ajouter des gestionnaires d'événements à la phase de capture uniquement lorsque vous devez intercepter l'événement avant qu'il n'atteigne la cible. Le conseil donné dans la programmation avancée JS est que si cela n'est pas spécifiquement nécessaire, il n'est pas recommandé d'enregistrer un gestionnaire d'événements dans la phase de capture d'événements.
Gestionnaire d'événements 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);三、事件对象
在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息，包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。
DOM中的事件对象
兼容DOM的浏览器会将一个event对象传入事件处理程序中，无论指定事件处理程序时用的是DOM0还是DOM2的方法，都会传入event对象。event对象只有在事件处理程序执行期间才会存在，一旦事件处理程序执行完毕，event对象就会被销毁。下面是代码示例：
var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
console.log(event.type); // "click"
}
btn.addEventListener("click", function(event) {
console.log(event.type);
}, false);event对象包含与创建它的特定事件有关的属性和方法，触发的事件类型不一样，可用的属性方法也有所不同。但是所有的事件都会有下列的属性或方法：
bubbles: 布尔值，表示事件是否冒泡
cancelable: 布尔值，表示是否可以取消事件的默认行为
currentTarget: 元素，事件处理程序当前正在处理事件的那个元素
defaultPrevented: 布尔值，表示是否调用过preventDefault()方法
detail: 整数，与事件相关的细节信息
eventPhase: 整数，调用事件处理程序的阶段，1表示捕获阶段，2表示目标阶段，3表示冒泡阶段
preventDefault(): 函数，取消事件的默认行为，cancelable为true时可以调用该方法
stopImmediatePropagation(): 函数，取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用
stopPropagation(): 函数，取消事件的进一步捕获或冒泡，bubbles为true时可以调用这个方法
target: 元素，事件的目标
trusted: 布尔值，为true时表示事件是浏览器生成的，否则表示事件是通过JS创建的
type: 字符串，被触发的事件类型
view: 与事件关联的抽象视图，等同于发生事件的window对象
下面代码示例展示了上述部分属性的用法，也可以帮助我们进一步理解事件流。假设页面中有一个按钮”myBtn”。当点击按钮时，this和currentTarget都等于body元素，因为事件处理程序是注册在body元素上。target的值却等于按钮元素，因为它是click事件的真正目标。由于按钮上没有注册事件处理程序，结果”click”事件冒泡到了document.body那里才得到处理。
document.body.onclick = function(event) {
console.log(event.currentTarget === document.body); // true
console.log(this === document.body); // true
console.log(event.target === document.getElementById("myBtn")); // true
};再看一个例子，下面代码中，stopPropagation()方法取消了事件的进一步捕获或冒泡。当我点击按钮时，本来应该会因为事件冒泡机制触发按钮和body元素上的点击事件处理程序，输出”From Bth …”和”From Body …”。现在点击事件在按钮元素上触发之后就被阻止继续在DOM层次中的传播，因此body上的事件处理程序不会被触发。
var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
console.log("From Bth ...");
event.stopPropagation(); // 停止事件传播
};
document.body.onclick = function() {
console.log("From Body ...");
};IE中的事件对象
在IE中，使用DOM0的方法添加事件处理程序时，event对象作为window对象的一个属性存在。如果是通过attachEvent()方法添加，则event对象是作为参数传入事件处理函数。下面是代码示例：
var btn = document.getElementById("myBtn");
btn.onclick = function() {
var event = window.event;
console.log(event.type); // "click"
};
btn.attachEvent("onclick", function(event) {
console.log(event.type); // "click"
});IE的event对象同样也包含与创建它的事件相关的属性和方法，这些属性和方法也会因为事件类型的不同而有所差异。但所有事件对象都会包含下列属性：
cancelBubble: 布尔值，可读可写，默认为false。将其设置为true时取消事件冒泡
returnValue: 布尔值，可读可写，默认为true。将其设置为false时取消事件的默认行为
srcElment: 元素，事件的目标元素，与DOM中的target属性相同
type: 字符串，事件类型
在IE中，事件处理程序的作用域是根据指定它的方式来确定，this的值不一定是指向事件的目标元素。因此，使用srcElement属性更具保险。请看下面代码实例，第一种方式中this的值为目标元素，而第二种方式，前面讲过这种方式的事件处理程序是在全局作用域中执行，因此this的值为window。
var btn = document.getElementById("myBtn");
btn.onclick = function() {
console.log(window.event.srcElement === this); // true
}
btn.attachEvent("onclick", function(event) {
console.log(event.srcElement === this); // false
});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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment faire de Google Maps la carte par défaut sur iPhone
Apr 17, 2024 pm 07:34 PM
La carte par défaut sur l'iPhone est Maps, le fournisseur de géolocalisation propriétaire d'Apple. Même si la carte s’améliore, elle ne fonctionne pas bien en dehors des États-Unis. Il n'a rien à offrir par rapport à Google Maps. Dans cet article, nous discutons des étapes réalisables pour utiliser Google Maps afin de devenir la carte par défaut sur votre iPhone. Comment faire de Google Maps la carte par défaut sur iPhone Définir Google Maps comme application cartographique par défaut sur votre téléphone est plus facile que vous ne le pensez. Suivez les étapes ci-dessous – Étapes préalables – Vous devez avoir Gmail installé sur votre téléphone. Étape 1 – Ouvrez l'AppStore. Étape 2 – Recherchez « Gmail ». Étape 3 – Cliquez à côté de l'application Gmail
Application d'horloge manquante sur iPhone : comment y remédier
May 03, 2024 pm 09:19 PM
L'application horloge est-elle absente de votre téléphone ? La date et l'heure apparaîtront toujours sur la barre d'état de votre iPhone. Cependant, sans l'application Horloge, vous ne pourrez pas utiliser l'horloge mondiale, le chronomètre, le réveil et bien d'autres fonctionnalités. Par conséquent, réparer l’application d’horloge manquante devrait figurer en haut de votre liste de tâches. Ces solutions peuvent vous aider à résoudre ce problème. Correctif 1 – Placer l’application Horloge Si vous avez supprimé par erreur l’application Horloge de votre écran d’accueil, vous pouvez remettre l’application Horloge à sa place. Étape 1 – Déverrouillez votre iPhone et commencez à faire glisser votre doigt vers la gauche jusqu'à atteindre la page Bibliothèque d'applications. Étape 2 – Ensuite, recherchez « horloge » dans le champ de recherche. Étape 3 – Lorsque vous voyez « Horloge » ci-dessous dans les résultats de recherche, maintenez-la enfoncée et
Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS
Apr 03, 2024 am 11:55 AM
La technologie de détection et de reconnaissance des visages est déjà une technologie relativement mature et largement utilisée. Actuellement, le langage d'application Internet le plus utilisé est JS. La mise en œuvre de la détection et de la reconnaissance faciale sur le front-end Web présente des avantages et des inconvénients par rapport à la reconnaissance faciale back-end. Les avantages incluent la réduction de l'interaction réseau et de la reconnaissance en temps réel, ce qui réduit considérablement le temps d'attente des utilisateurs et améliore l'expérience utilisateur. Les inconvénients sont les suivants : il est limité par la taille du modèle et la précision est également limitée ; Comment utiliser js pour implémenter la détection de visage sur le web ? Afin de mettre en œuvre la reconnaissance faciale sur le Web, vous devez être familier avec les langages et technologies de programmation associés, tels que JavaScript, HTML, CSS, WebRTC, etc. Dans le même temps, vous devez également maîtriser les technologies pertinentes de vision par ordinateur et d’intelligence artificielle. Il convient de noter qu'en raison de la conception du côté Web
Impossible d'autoriser l'accès à la caméra et au microphone sur iPhone
Apr 23, 2024 am 11:13 AM
Le message « Impossible d'autoriser l'accès à la caméra et au microphone » s'affiche-t-il lorsque vous essayez d'utiliser l'application ? En règle générale, vous accordez des autorisations de caméra et de microphone à des personnes spécifiques en fonction de leurs besoins. Cependant, si vous refusez l'autorisation, la caméra et le microphone ne fonctionneront pas et afficheront ce message d'erreur à la place. Résoudre ce problème est très simple et vous pouvez le faire en une minute ou deux. Correctif 1 – Fournir les autorisations de caméra et de microphone Vous pouvez fournir les autorisations de caméra et de microphone nécessaires directement dans les paramètres. Étape 1 – Accédez à l'onglet Paramètres. Étape 2 – Ouvrez le panneau Confidentialité et sécurité. Étape 3 – Activez-y l’autorisation « Caméra ». Étape 4 – À l’intérieur, vous trouverez une liste des applications qui ont demandé l’autorisation d’accéder à l’appareil photo de votre téléphone. Étape 5 – Ouvrez la « Appareil photo » de l'application spécifiée
Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies avec PHP et JS
Dec 17, 2023 pm 06:55 PM
Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies en PHP et JS. Des exemples de code spécifiques sont nécessaires. Avec le développement rapide d'Internet et de la technologie, le trading d'actions est devenu l'un des moyens importants pour de nombreux investisseurs. L'analyse boursière est une partie importante de la prise de décision des investisseurs, et les graphiques en bougies sont largement utilisés dans l'analyse technique. Apprendre à dessiner des graphiques en bougies à l'aide de PHP et JS fournira aux investisseurs des informations plus intuitives pour les aider à prendre de meilleures décisions. Un graphique en chandeliers est un graphique technique qui affiche les cours des actions sous forme de chandeliers. Il montre le cours de l'action
WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel
Dec 17, 2023 pm 05:30 PM
WebSocket et JavaScript : technologies clés pour réaliser des systèmes de surveillance en temps réel Introduction : Avec le développement rapide de la technologie Internet, les systèmes de surveillance en temps réel ont été largement utilisés dans divers domaines. L'une des technologies clés pour réaliser une surveillance en temps réel est la combinaison de WebSocket et de JavaScript. Cet article présentera l'application de WebSocket et JavaScript dans les systèmes de surveillance en temps réel, donnera des exemples de code et expliquera leurs principes de mise en œuvre en détail. 1. Technologie WebSocket
Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières
Dec 18, 2023 pm 03:39 PM
Avec le développement rapide de la finance sur Internet, l'investissement en actions est devenu le choix de plus en plus de personnes. Dans le trading d'actions, les graphiques en bougies sont une méthode d'analyse technique couramment utilisée. Ils peuvent montrer l'évolution des cours des actions et aider les investisseurs à prendre des décisions plus précises. Cet article présentera les compétences de développement de PHP et JS, amènera les lecteurs à comprendre comment dessiner des graphiques en bougies boursières et fournira des exemples de code spécifiques. 1. Comprendre les graphiques en bougies boursières Avant de présenter comment dessiner des graphiques en bougies boursières, nous devons d'abord comprendre ce qu'est un graphique en bougies. Les graphiques en chandeliers ont été développés par les Japonais
JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel
Dec 17, 2023 pm 05:13 PM
JavaScript et WebSocket : Construire un système efficace de prévisions météorologiques en temps réel Introduction : Aujourd'hui, la précision des prévisions météorologiques revêt une grande importance pour la vie quotidienne et la prise de décision. À mesure que la technologie évolue, nous pouvons fournir des prévisions météorologiques plus précises et plus fiables en obtenant des données météorologiques en temps réel. Dans cet article, nous apprendrons comment utiliser la technologie JavaScript et WebSocket pour créer un système efficace de prévisions météorologiques en temps réel. Cet article démontrera le processus de mise en œuvre à travers des exemples de code spécifiques. Nous
