Points clés
- La détection des fonctionnalités JavaScript (les fonctionnalités de test que les programmeurs souhaitent utiliser) n'est pas toujours fiable. Par exemple, testez ActiveXObject dans Internet Explorer pour les demandes AJAX, les attributs HTML mappés aux propriétés DOM, les hypothèses sur le comportement de l'utilisateur (comme la détection des appareils tactiles), etc.
- Lorsque la détection des fonctionnalités échoue, la détection du navigateur est parfois requise. Cependant, il est recommandé d'utiliser des tests d'objets propriétaires au lieu des informations de navigateur et de les utiliser pour exclure les navigateurs plut?t que de les inclure.
- Soyez extrêmement prudent lors de la mise en ?uvre de la détection du navigateur. Supposons toujours qu'il est entièrement cohérent avec les tests de fonctionnalités et ne recherchez pas la détection du navigateur que si vous savez qu'une fonctionnalité ne fonctionne pas comme prévu. De plus, la syntaxe utilisée pour les tests d'objets et de fonctionnalités peut affecter le taux de réussite de détection, donc le choix de la bonne syntaxe est crucial.
Il était une fois, la détection du navigateur était la meilleure compétence des programmeurs JavaScript. Si nous savons que certaines fonctionnalités fonctionnent dans IE5 mais pas dans Netscape 4, nous testerons le navigateur et modifierons le code en conséquence. Par exemple:
if (navigator.userAgent.indexOf('MSIE 5') != -1) {
// 我們認(rèn)為此瀏覽器是 IE5
}
Mais quand j'ai rejoint l'industrie pour la première fois, la course aux armements avait déjà commencé! Les fournisseurs ajoutent des valeurs supplémentaires aux cha?nes d'agent utilisateur, ils ressemblent donc aux navigateurs de leurs concurrents et aux leurs. Par exemple, c'est Safari 5 pour Mac:
<code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/534.59.10 (KHTML, like Gecko) Version/5.1.9 Safari/534.59.10</code>
Cela correspondra aux tests pour "safari", "webkit" et "khtml" (la base de code Konqueror que WebKit est basée) mais il correspond également à "Gecko" (qui est le moteur de rendu de Firefox), et bien s?r " Mozilla "" (pour des raisons historiques, presque tous les navigateurs prétendent être Mozilla).
Le but d'ajouter toutes ces valeurs est de contourner la détection du navigateur. Si le script suppose que seul Firefox peut gérer des fonctionnalités spécifiques, Safari peut être exclu, même si elle peut fonctionner. N'oubliez pas que les utilisateurs peuvent modifier eux-mêmes leur agent utilisateur - j'avais l'habitude de définir mon navigateur pour reconna?tre "Googlebot / 1.0" afin que je puisse accéder à ce que le propriétaire du site pense être pour ramper uniquement!
Ainsi, au fil du temps, ce type de détection du navigateur est devenu un gachis impossible et est largement hors d'usage, remplacé par quelque chose de mieux: la détection de la fonction.
La détection des fonctionnalités est simplement de tester les fonctionnalités que nous souhaitons utiliser. Par exemple, si nous avons besoin de getBoundingClientRect (obtenez la position d'un élément par rapport à la fenêtre), il est important de savoir si le navigateur le prend en charge, et non quel navigateur est donc; Pire que la fonction de test elle-même:
if (typeof document.documentElement.getBoundingClientRect != "undefined") {
// 瀏覽器支持此函數(shù)
} Les navigateurs qui ne prennent pas en charge cette fonction renverront le type "non défini", de sorte que la condition ne sera pas transmise. Sans tester le script dans un navigateur particulier, nous savons qu'il fonctionne correctement ou échoue silencieusement. ou nous…?
Mais la vérité est - la détection des fonctionnalités n'est pas entièrement fiable - parfois elle échoue. Voyons donc quelques exemples maintenant et voyons ce que nous pouvons faire pour résoudre chaque cas.
Objet ActiveX
Peut-être que l'exemple le plus célèbre de défaillance de détection des fonctionnalités est de tester ActiveXObject pour les demandes AJAX dans Internet Explorer.
ActiveX est un exemple d'objets en retard, et la signification pratique est que vous ne pouvez pas savoir s'il est pris en charge jusqu'à ce que vous essayiez de l'utiliser . Par conséquent, si l'utilisateur désactive ActiveX, le code suivant lancera une erreur:
if (navigator.userAgent.indexOf('MSIE 5') != -1) {
// 我們認(rèn)為此瀏覽器是 IE5
} Pour résoudre ce problème, nous devons utiliser la manipulation des exceptions - essayez Instancier l'objet, Catch toute échec et le gérer en conséquence:
<code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/534.59.10 (KHTML, like Gecko) Version/5.1.9 Safari/534.59.10</code>Attribut html mappé à l'attribut DOM
Le mappage d'attributs est souvent utilisé pour tester le support des API utilisés avec les propriétés HTML5. Par exemple, vérifiez si un élément avec
prend en charge l'API Draggable en recherchant des propriétés draggables: [draggable="true"]
if (typeof document.documentElement.getBoundingClientRect != "undefined") {
// 瀏覽器支持此函數(shù)
} Le problème ici est que IE8 ou antérieure mappera automatiquement toutes les propriétés HTML HTML aux propriétés DOM. C'est pourquoi est si déroutant dans ces anciennes versions, car elle ne renvoie pas du tout les propriétés, mais les propriétés DOM.
getAttribute Cela signifie que si nous utilisons un élément qui a déjà l'attribut
Ensuite, même s'ils ne sont pas pris en charge, IE8 ou précédent retournera
pourif (typeof window.ActiveXObject != "undefined") {
var request = new ActiveXObject("Microsoft.XMLHTTP");
}.
true L'attribut peut être n'importe quoi: ("draggable" in element)
mais le résultat sera le même - IE8 ou précédent retournera
pourif (typeof window.ActiveXObject != "undefined") {
try {
var request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (ex) {
request = null;
}
if (request !== null) {
//... 我們有一個請求對象
}
}.
true Dans ce cas, la solution consiste à utiliser un élément qui n'a pas cet attribut pour les tests, le moyen le plus s?r est d'utiliser l'élément créé: ("nonsense" in element)
Hypothèses sur le comportement des utilisateurs
if ("draggable" in element) {
// 瀏覽器支持拖放
} Vous avez peut-être vu utiliser le code suivant pour détecter les appareils tactiles: La plupart des périphériques tactiles implémentent les retards manuels avant de déclencher un événement de clic (généralement environ 300 millisecondes), c'est-à-dire pour éviter de cliquer sur les éléments tout en cliquant. Mais cela fait que l'application se sent lente et insensible, donc les développeurs utilisent parfois ce test de fonctionnalité pour débarquer l'événement:
<div draggable="true"> ... </div>
Cependant, cette condition provient d'une erreur
du<div nonsense="true"> ... </div>- Parce que l'appareil prend en charge le toucher, le toucher sera utilisé. Mais qu'en est-il des ordinateurs portables à écran tactile? L'utilisateur peut toucher l'écran ou utiliser une souris ou un trackpad;
Dans ce cas, la solution n'est pas du tout de la prise en charge des événements - liez plut?t deux événements
en même temps, puis utilisez pour empêcher le contact de générer des clics: reconna?tre cela est douloureux, mais parfois ce que nous n'avons pas besoin de tester n'est pas la fonctionnalité - mais le navigateur - parce qu'un navigateur particulier prétend soutenir quelque chose qui ne fonctionne pas. Un exemple récent est Le test des fonctionnalités échoue ici parce que Opera 12 prétend le soutenir; Cela ne fonctionne tout simplement pas: Maintenant, si vous voulez juste essayer pour ajouter une image de glisser personnalisée et que vous êtes heureux de conserver la valeur par défaut sans support (ce qui se produira), alors cela peut être bien. Mais que se passe-t-il si votre application a besoin d'images personnalisées afin que les navigateurs qui ne le prennent pas en charge devraient utiliser une implémentation complètement différente (c'est-à-dire utiliser JavaScript personnalisé pour implémenter tout comportement de glisser)?
ou si le navigateur implémente certaines fonctionnalités mais qu'il y a des erreurs de rendu inévitables? Parfois, nous n'avons pas d'autre choix que de détecter explicitement le navigateur problématique et de l'exclure des fonctionnalités qu'il aurait essayé de prendre en charge l'utilisation. Donc, le problème devient - quel est le moyen le plus s?r d'atteindre la détection du navigateur? J'ai deux suggestions:
Nous avons remarqué que les cha?nes d'agent utilisateur sont un gachis peu fiable, mais les cha?nes de fournisseurs sont en fait assez prévisibles et peuvent être utilisées pour tester de manière fiable Chrome ou Safari: La règle d'or pour tout cela est extrêmement prudent. Assurez-vous de tester les conditions dans autant de navigateurs que possible et de considérer attentivement leur car il y a déjà des erreurs connues, ne les incluez pas à cause de fonctionnalités connues (c'est le but du test des fonctionnalités)
Fondamentalement, supposons toujours que le test des fonctionnalités est entièrement conforme à - à moins que vous ne sachiez que ce n'est pas le cas, alors la fonction fonctionnera comme prévu.
Sélectionnez Test Syntaxe Avant de terminer, je souhaite consulter les différents types de syntaxe que nous pouvons utiliser pour les tests d'objets et de propriétés. Par exemple, ces dernières années, la syntaxe suivante est devenue courante: Nous n'avons pas pu l'utiliser dans le passé car IE5 et ses produits similaires jettent des erreurs en raison de la syntaxe; mais maintenant nous n'avons plus à soutenir ces navigateurs, ce qui n'est plus un problème. Essentiellement, c'est exactement la même chose que les suivants, mais c'est plus court à écrire: Cependant, les conditions de test reposent généralement sur la conversion de type automatique: Nous avons utilisé cette syntaxe plus t?t dans certains tests d'objets de navigateur (par exemple Mais nous pouvons tester quelque chose qui renvoie efficacement les cha?nes nulles ou vides, qui évaluent toutes deux en false. Par exemple, l'attribut Il n'évaluera que si l'attribut La règle générale est la suivante: s'appuyer sur la conversion de type automatique est sans danger pour les objets et les fonctions, mais pas nécessairement sans danger pour les cha?nes et les nombres ou les valeurs qui peuvent être nuls. Cela étant dit - si vous pouvez l'utiliser en toute sécurité, faites-le parce qu'il est généralement beaucoup plus rapide dans les navigateurs modernes (probablement parce qu'ils sont optimisés pour ce type de condition). Pour plus d'informations à ce sujet, voir: Conversion de type automatique dans le monde réel. La détection des fonctionnalités JavaScript est une technologie utilisée par les développeurs pour déterminer si le navigateur d'un utilisateur prend en charge une fonctionnalité ou une API spécifique. Ceci est crucial car tous les navigateurs ne prennent pas en charge toutes les fonctionnalités de JavaScript. En utilisant la détection des fonctionnalités, les développeurs peuvent fournir des solutions ou des replies alternatives pour les fonctionnalités non pris en charge, garantissant que les sites Web ou les applications s'exécutent correctement sur différents navigateurs. Cela améliore l'expérience utilisateur et garantit la compatibilité. La détection des fonctionnalités JavaScript peut échouer pour un certain nombre de raisons. Une raison courante est que le code de détection des fonctionnalités est incorrectement implémenté. Par exemple, si le code vérifie les propriétés qui n'existent pas dans l'objet, il renverra indéfini, ce qui entra?nera un faux négatif. Une autre raison pourrait être une bizarrerie ou une erreur de navigateur, ce qui pourrait entra?ner la détection des fonctionnalités pour donner des résultats inexacts. La détection des fonctionnalités consiste à vérifier si le navigateur d'un utilisateur prend en charge une fonctionnalité ou une API spécifique, tandis que la détection du navigateur reconna?t le navigateur et la version de l'utilisateur. Bien que les deux techniques soient con?ues pour garantir la compatibilité et les fonctionnalités, la détection des fonctionnalités est souvent considérée comme une meilleure pratique car elle vérifie directement les fonctionnalités, plut?t que de supposer sa prise en charge en fonction du type ou de la version du navigateur. Vous pouvez utiliser l'attribut Fonction.js est un utilitaire JavaScript léger, rapide et simple pour la détection des fonctionnalités. Il fournit une API facile à utiliser qui permet aux développeurs de tester si le navigateur prend en charge des fonctionnalités spécifiques. Cela permet de fournir une solution de sauvegarde ou une solution alternative pour les fonctionnalités non étayées, améliorant ainsi la compatibilité et la fonctionnalité du site Web ou de l'application. Modernizr est une bibliothèque JavaScript qui aide les développeurs à profiter des fonctionnalités HTML5 et CSS3 tout en maintenant la compatibilité avec les navigateurs plus anciens. Il utilise la détection des fonctionnalités pour vérifier si le navigateur prend en charge des fonctionnalités spécifiques et ajoute des classes aux éléments HTML, vous permettant de localiser des fonctionnalités de navigateur spécifiques dans Styleshets ou JavaScript. Device-Detector-JS est un outil puissant pour la détection des périphériques. Il analyse les cha?nes d'agent utilisateur et détecte les smartphones, tablettes, ordinateurs de bureau, téléviseurs et autres appareils. Il détecte également les navigateurs, les moteurs, les systèmes d'exploitation et d'autres informations utiles. Vous pouvez utiliser ce package pour ajuster le comportement d'un site Web ou d'une application en fonction des appareils détectés. Certaines meilleures pratiques pour implémenter la détection des fonctionnalités incluent: l'utilisation de bibliothèques fiables et testées telles que Modernizr ou fonctionnalités. Basé sur le type ou la version du navigateur. Oui, la détection des fonctionnalités peut aider à améliorer les performances du site Web. En détectant des fonctionnalités non soutenues et en fournissant des solutions alternatives ou des solutions de secours, vous pouvez empêcher le code inutile de fonctionner dans le navigateur. Cela réduit le temps de chargement et améliore les performances globales du site Web. En raison du développement rapide du développement Web, il peut être difficile de comprendre les dernières fonctionnalités prises en charge par différents navigateurs. Cependant, des ressources telles que Mozilla Developer Network (MDN), puis-je utiliser, et la documentation JavaScript peut fournir les dernières informations sur la prise en charge des fonctionnalités dans différents navigateurs. 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!if (navigator.userAgent.indexOf('MSIE 5') != -1) {
// 我們認(rèn)為此瀏覽器是 IE5
}
des choses qui ne fonctionnent pas du tout
setDragImage() dans Opera 12 (qui est un moyen de faire glisser et déposer dataTransfer objets). <code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/534.59.10 (KHTML, like Gecko) Version/5.1.9 Safari/534.59.10</code>
OBJET DE DéTECTION D'OBJET 12 ou plus t?t, afin que nous puissions utiliser cette exclusion pour tester la prise en charge dragable: window.opera
if (typeof document.documentElement.getBoundingClientRect != "undefined") {
// 瀏覽器支持此函數(shù)
}
if (typeof window.ActiveXObject != "undefined") {
var request = new ActiveXObject("Microsoft.XMLHTTP");
} pour déterminer la prise en charge de fonctionnalités spécifiques dans un navigateur spécifique, ou en cas d'urgence, définissez des conditions de navigateur plus précises: if (typeof window.ActiveXObject != "undefined") {
try {
var request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (ex) {
request = null;
}
if (request !== null) {
//... 我們有一個請求對象
}
}
if ("draggable" in element) {
// 瀏覽器支持拖放
} - L'objectif est d'utiliser des conditions de navigateur pour exclure les navigateurs if (navigator.userAgent.indexOf('MSIE 5') != -1) {
// 我們認(rèn)為此瀏覽器是 IE5
}
<code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/534.59.10 (KHTML, like Gecko) Version/5.1.9 Safari/534.59.10</code>
if (typeof document.documentElement.getBoundingClientRect != "undefined") {
// 瀏覽器支持此函數(shù)
}
window.opera tests), qui est s?r en raison de la fa?on dont les objets évaluent - tout objet ou fonction défini sera toujours évalué comme vrai, et s'il n'est pas défini, il sera être évalué comme faux. style.maxWidth est parfois utilisé pour exclure IE6: if (typeof window.ActiveXObject != "undefined") {
var request = new ActiveXObject("Microsoft.XMLHTTP");
}
maxWidth est pris en charge et que le a la valeur définie par l'auteur, donc si nous écrivons le test comme celui-ci, il peut échouer: if (typeof window.ActiveXObject != "undefined") {
try {
var request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (ex) {
request = null;
}
if (request !== null) {
//... 我們有一個請求對象
}
}
Des questions fréquemment posées sur la détection des fonctionnalités JavaScript
Qu'est-ce que la détection des fonctionnalités JavaScript et pourquoi est-elle importante?
Comment la détection des fonctionnalités JavaScript échoue-t-elle?
Quelle est la différence entre la détection des fonctionnalités et la détection du navigateur?
Comment utiliser JavaScript pour détecter les appareils mobiles?
navigator.userAgent dans JavaScript pour détecter les appareils mobiles. Cette propriété renvoie une cha?ne représentant l'en-tête de l'agent utilisateur du navigateur. En vérifiant des mots clés spécifiques dans cette cha?ne (tels que "Android", "iPhone" ou "iPad"), vous pouvez déterminer si l'utilisateur est sur un appareil mobile. Qu'est-ce que la fonctionnalité.js et comment cela aide-t-il à la détection des fonctionnalités?
Qu'est-ce que Modernizr et comment cela aide-t-il à la détection des fonctionnalités?
Comment utiliser le package de périphérique-détecteur-js pour la détection des fonctionnalités?
Le package Quelles sont les meilleures pratiques pour implémenter la détection des fonctionnalités?
La détection des comptes peut-elle aider à améliorer les performances du site Web?
Comment comprendre les dernières fonctionnalités prises en charge par différents navigateurs?
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
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.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!
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 une demande HTTP dans Node.js?
Jul 13, 2025 am 02:18 AM
Il existe trois fa?ons courantes d'initier des demandes HTTP dans Node.js: utilisez des modules intégrés, Axios et Node-Fetch. 1. Utilisez le module HTTP / HTTPS intégré sans dépendances, ce qui convient aux scénarios de base, mais nécessite un traitement manuel de la couture des données et de la surveillance des erreurs, tels que l'utilisation de https.get () pour obtenir des données ou envoyer des demandes de post via .write (); 2.AXIOS est une bibliothèque tierce basée sur la promesse. Il a une syntaxe concise et des fonctions puissantes, prend en charge l'async / attendre, la conversion JSON automatique, l'intercepteur, etc. Il est recommandé de simplifier les opérations de demande asynchrones; 3.Node-Fetch fournit un style similaire à la récupération du navigateur, basé sur la promesse et la syntaxe simple
Types de données JavaScript: référence primitive vs
Jul 13, 2025 am 02:43 AM
Les types de données JavaScript sont divisés en types primitifs et types de référence. Les types primitifs incluent la cha?ne, le nombre, le booléen, le nul, un non défini et le symbole. Les valeurs sont immuables et les copies sont copiées lors de l'attribution des valeurs, de sorte qu'elles ne se affectent pas; Les types de référence tels que les objets, les tableaux et les fonctions stockent les adresses de mémoire, et les variables pointant vers le même objet s'afferchent mutuellement. Le typeof et l'instance de OFF peuvent être utilisés pour déterminer les types, mais prêtent attention aux problèmes historiques de typeofnull. Comprendre ces deux types de différences peut aider à écrire un code plus stable et fiable.
Objet JavaScript Time, quelqu'un construit un site Web Eactexe, plus rapide sur Google Chrome, etc.
Jul 08, 2025 pm 02:27 PM
Bonjour, développeurs JavaScript! Bienvenue dans JavaScript News de cette semaine! Cette semaine, nous nous concentrerons sur: le différend de marque d'Oracle avec Deno, les nouveaux objets Time JavaScript sont pris en charge par les navigateurs, les mises à jour Google Chrome et certains outils de développeurs puissants. Commen?ons! Le différend de marque d'Oracle avec la tentative de Deno Oracle d'enregistrer une marque "JavaScript" a provoqué la controverse. Ryan Dahl, le créateur de Node.js et Deno, a déposé une pétition pour annuler la marque, et il pense que JavaScript est un niveau ouvert et ne devrait pas être utilisé par Oracle
Gestion des promesses: cha?nage, gestion des erreurs et combinateurs de promesses en javascript
Jul 08, 2025 am 02:40 AM
La promesse est le mécanisme central pour gérer les opérations asynchrones en JavaScript. Comprendre les appels de cha?ne, la gestion des erreurs et les combinants est la clé pour ma?triser leurs applications. 1. L'appel de la cha?ne renvoie une nouvelle promesse à travers. Puis () pour réaliser la concaténation des processus asynchrones. Chaque .then () re?oit le résultat précédent et peut renvoyer une valeur ou une promesse; 2. La gestion des erreurs doit utiliser .catch () pour attraper des exceptions pour éviter les défaillances silencieuses, et peut renvoyer la valeur par défaut dans Catch pour continuer le processus; 3. Combinateurs tels que promesse.all () (réussi avec succès uniquement après tout succès), promesse.race () (le premier achèvement est retourné) et promesse.allsetTled () (en attente de toutes les achèvements)
Qu'est-ce que l'API Cache et comment est-elle utilisée avec les travailleurs du service?
Jul 08, 2025 am 02:43 AM
Cacheapi est un outil fourni par le navigateur pour mettre en cache les demandes de réseau, qui est souvent utilisée en conjonction avec travailleur de service pour améliorer les performances du site Web et l'expérience hors ligne. 1. Il permet aux développeurs de stocker manuellement des ressources telles que des scripts, des feuilles de style, des photos, etc.; 2. Il peut faire correspondre les réponses du cache en fonction des demandes; 3. Il prend en charge la suppression des caches spécifiques ou la nettoyage du cache entier; 4. Il peut mettre en ?uvre des stratégies de priorité de cache ou de priorité de réseau grace à l'écoute des événements Fetch; 5. Il est souvent utilisé pour le support hors ligne, accélérez la vitesse d'accès répétée, préchargement des ressources clés et du contenu de mise à jour des antécédents; 6. Lorsque vous l'utilisez, vous devez faire attention au contr?le de la version du cache, aux restrictions de stockage et à la différence entre le mécanisme de mise en cache HTTP.
JS Roundup: une plongée profonde dans la boucle d'événement JavaScript
Jul 08, 2025 am 02:24 AM
La boucle d'événement de JavaScript gère les opérations asynchrones en coordonnant les piles d'appels, les webapis et les files d'attente de taches. 1. La pile d'appels exécute du code synchrone, et lors de la rencontre de taches asynchrones, il est remis à WebAPI pour le traitement; 2. Une fois que le WebAPI a terminé la tache en arrière-plan, il met le rappel dans la file d'attente correspondante (macro tache ou micro tache); 3. La boucle d'événement vérifie si la pile d'appels est vide. S'il est vide, le rappel est retiré de la file d'attente et poussé dans la pile d'appels pour l'exécution; 4. Micro taches (comme Promise. puis) ??prendre la priorité sur les taches macro (telles que Settimeout); 5. Comprendre la boucle d'événements permet d'éviter de bloquer le thread principal et d'optimiser l'ordre d'exécution du code.
Comprendre l'événement bouillonnant et capturer dans les événements JavaScript DOM
Jul 08, 2025 am 02:36 AM
Les bulles d'événements se propagent de l'élément cible vers l'extérieur vers le n?ud d'ancêtre, tandis que la capture d'événements se propage de la couche externe vers l'intérieur vers l'élément cible. 1. événements Bubbles: Après avoir cliqué sur l'élément enfant, l'événement déclenche l'auditeur de l'élément parent vers le haut. Par exemple, après avoir cliqué sur le bouton, il sortira d'abord cliqué sur l'enfant, puis parent. 2. Capture d'événement: définissez le troisième paramètre sur true, afin que l'auditeur soit exécuté dans l'étape de capture, tels que le déclenchement de l'écouteur de capture de l'élément parent avant de cliquer sur le bouton. 3. Les utilisations pratiques incluent la gestion unifiée des événements d'éléments enfants, le prétraitement d'interception et l'optimisation des performances. 4. Le flux d'événements DOM est divisé en trois étapes: capture, cible et bulle, et l'écouteur par défaut est exécuté dans l'étape de la bulle.
Un tour d'horizon des fonctions d'ordre supérieur au-delà de la carte et du filtre
Jul 10, 2025 am 11:41 AM
Dans les tableaux JavaScript, en plus de la carte et du filtre, il existe d'autres méthodes puissantes et rarement utilisées. 1. La réduction peut non seulement résumer, mais également compter, se regrouper, aplatir les tableaux et construire de nouvelles structures; 2. Find et FindIndex sont utilisés pour trouver des éléments ou des index individuels; 3.Il et tout sont utilisés pour déterminer si les conditions existent ou que toutes les personnes se rencontrent; 4.Sort peut être trié mais changera le tableau d'origine; 5. Faites attention à la copie du tableau lorsque vous l'utilisez pour éviter les effets secondaires. Ces méthodes rendent le code plus concis et efficace.
