interface Web
js tutoriel
Qu'est-ce que le flux d'événements JavaScript et le gestionnaire d'événements expliqués en détail
Qu'est-ce que le flux d'événements JavaScript et le gestionnaire d'événements expliqués en détail
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!
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)
Le processus de fonctionnement de l'hôte de service WIN10 occupant trop de CPU
Mar 27, 2024 pm 02:41 PM
1. Tout d'abord, nous cliquons avec le bouton droit sur l'espace vide de la barre des tâches et sélectionnons l'option [Gestionnaire des tâches], ou cliquons avec le bouton droit sur le logo de démarrage, puis sélectionnons l'option [Gestionnaire des tâches]. 2. Dans l'interface du Gestionnaire des tâches ouverte, nous cliquons sur l'onglet [Services] à l'extrême droite. 3. Dans l'onglet [Service] ouvert, cliquez sur l'option [Ouvrir le service] ci-dessous. 4. Dans la fenêtre [Services] qui s'ouvre, cliquez avec le bouton droit sur le service [InternetConnectionSharing(ICS)], puis sélectionnez l'option [Propriétés]. 5. Dans la fenêtre des propriétés qui s'ouvre, remplacez [Ouvrir avec] par [Désactivé], cliquez sur [Appliquer] puis cliquez sur [OK]. 6. Cliquez sur le logo Démarrer, puis cliquez sur le bouton d'arrêt, sélectionnez [Redémarrer] et terminez le redémarrage de l'ordinateur.
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
Un guide rapide sur la manipulation des fichiers CSV
Dec 26, 2023 pm 02:23 PM
Apprenez rapidement à ouvrir et traiter des fichiers au format CSV Avec le développement continu de l'analyse et du traitement des données, le format CSV est devenu l'un des formats de fichiers les plus utilisés. Un fichier CSV est un fichier texte simple et facile à lire avec différents champs de données séparés par des virgules. Que ce soit dans la recherche académique, l'analyse commerciale ou le traitement de données, nous rencontrons souvent des situations où nous devons ouvrir et traiter des fichiers CSV. Le guide suivant vous montrera comment apprendre rapidement à ouvrir et traiter des fichiers au format CSV. Étape 1 : Comprendre le format de fichier CSV. Tout d'abord,
Apprenez à gérer les caractères spéciaux et à convertir les guillemets simples en PHP
Mar 27, 2024 pm 12:39 PM
Dans le processus de développement PHP, la gestion des caractères spéciaux est un problème courant, en particulier dans le traitement des chaînes, les caractères spéciaux sont souvent échappés. Parmi eux, la conversion de caractères spéciaux en guillemets simples est une exigence relativement courante, car en PHP, les guillemets simples sont un moyen courant d'encapsuler des chaînes. Dans cet article, nous expliquerons comment gérer les guillemets simples de conversion de caractères spéciaux en PHP et fournirons des exemples de code spécifiques. En PHP, les caractères spéciaux incluent, sans s'y limiter, les guillemets simples ('), les guillemets doubles ("), la barre oblique inverse (), etc. Dans les chaînes
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
Comment résoudre le problème après l'échec de la mise à niveau de Win7 vers Win10 ?
Dec 26, 2023 pm 07:49 PM
Si le système d'exploitation que nous utilisons est Win7, certains amis peuvent ne pas réussir à passer de Win7 à Win10 lors de la mise à niveau. L'éditeur pense que nous pouvons réessayer la mise à jour pour voir si cela peut résoudre le problème. Jetons un coup d'œil à ce que l'éditeur a fait pour plus de détails ~ Que faire si Win7 ne parvient pas à passer à Win10 Méthode 1 : 1. Il est recommandé de télécharger d'abord un pilote pour évaluer si votre ordinateur peut être mis à niveau vers Win10. utilisez le test du pilote après la mise à niveau. Vérifiez s'il y a des anomalies du pilote, puis corrigez-les en un seul clic. Méthode 2 : 1. Supprimez tous les fichiers sous C:\Windows\SoftwareDistribution\Download. 2.win+R exécutez "wuauclt.e
Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP
Jan 05, 2024 pm 06:08 PM
Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest
La relation entre js et vue
Mar 11, 2024 pm 05:21 PM
La relation entre js et vue : 1. JS comme pierre angulaire du développement Web ; 2. L'essor de Vue.js en tant que framework front-end ; 3. La relation complémentaire entre JS et Vue ; Vue.
