Share
Bonjour et bienvenue dans la série "JavaScript and the DOM". La dernière fois que nous avons abordé quelques notions de base de JavaScript, nous avons abordé divers aspects du modèle d’objet document, notamment comment accéder aux nœuds et parcourir le DOM. Aujourd'hui, nous verrons comment manipuler des éléments dans le DOM et discuterons du modèle d'événement du navigateur..
Dans la dernière leçon, nous avons présenté les étapes nécessaires pour accéder à une collection de nœuds DOM ou à un nœud DOM singulier. La vraie magie se produit lorsque vous manipulez ensuite certaines propriétés, ce qui est connu sous le nom de "comportement"..
Chaque nœud DOM possède une collection de propriétés; la plupart de ces propriétés fournissent des abstractions à certaines fonctionnalités. Par exemple, si vous avez un élément de paragraphe avec un identifiant "intro", vous pouvez très facilement changer la couleur de cet élément via l'API DOM:
Accentsconagua
document.getElementById ('intro'). style.color = '# FF0000'; Pour illustrer la nature objet / propriété de cette API, il serait peut-être plus facile de comprendre si nous la décomposons en affectant chaque objet à une variable:
var myDocument = document; var myIntro = myDocument.getElementById ('intro'); var myIntroStyles = myIntro.style; // Et maintenant, nous pouvons définir la couleur: myIntroStyles.color = '# FF0000'; Maintenant que nous avons une référence à l'objet 'style' du paragraphe, nous pouvons ajouter d'autres styles CSS:
myIntroStyles.padding = '2px 3px 0 3px'; myIntroStyles.backgroundColor = '#FFF'; myIntroStyles.marginTop = '20px';
Nous utilisons simplement les noms de propriétés CSS de base ici. La seule différence est que là où vous devriez normalement trouver un tiret ('-'), le texte est camel casé. Donc, au lieu de "margin-top", nous utilisons "marginTop". Ce qui suit, par exemple, ne serait pas fonctionnerait et produirait une erreur de syntaxe:
myIntroStyles.padding-top = '10em'; // Produit une erreur de syntaxe: // - Le caractère '-' est l'opérateur moins en JavaScript. // - De plus, il n'y a pas de nom de propriété.
Les propriétés peuvent être accédées sous forme de tableau. Donc, avec cette connaissance, nous pourrions créer une petite fonction pour changer n'importe quel style d'un élément donné:
function changeStyle (elem, property, val) elem.style [propriété] = val; // Notez les crochets utilisés pour accéder à la propriété // Vous utiliseriez le plugin ci-dessus comme ceci: var myIntro = document.getElementById ('intro'); // Grab Intro paragraph changeStyle (myIntro, 'color', 'red'); Ceci est juste un exemple - pour être honnête, ce n'est probablement pas une fonction très utile car, syntaxiquement, il est plus rapide d'utiliser les moyens conventionnels montrés plus haut (par exemple,. elem.style.color = 'red').
En plus de la propriété 'style', il en existe beaucoup d'autres que vous pouvez utiliser pour manipuler certains aspects d'un nœud / élément. En fait, si Firebug est installé, essayez d’inspecter un élément, puis cliquez sur l’onglet "DOM" (normalement à droite ou en dessous du panneau de visualisation de l’élément) pour afficher toutes ses propriétés:
Vous pouvez accéder à toutes les propriétés en utilisant la notation par points conventionnelle (par exemple, Element.tabIndex). Toutes les propriétés ne sont pas des types de données primitifs (chaînes, nombres, booléens, etc.); la propriété 'style', par exemple, dont nous avons déjà parlé, est un objet contenant ses propres propriétés. La plupart des propriétés d'un élément seront uniquement lisibles. ce que je veux dire par là, c'est que vous ne pouvez pas changer leur valeur. Par exemple, vous ne pouvez pas modifier directement la propriété 'parentNode' d'un nœud. Le navigateur génère généralement une erreur si vous essayez de modifier l’une de ces propriétés en lecture seule: par ex. ERREUR: "définition d'une propriété qui n'a qu'un getter". C'est juste quelque chose à prendre en compte…
Une exigence commune consiste à modifier le contenu d'un élément. Il y a plusieurs façons de le faire. De loin, le moyen le plus simple consiste à utiliser la propriété 'innerHTML', comme ceci:
var myIntro = document.getElementById ('intro'); // Remplacement du contenu actuel par un nouveau contenu: myIntro.innerHTML = 'Nouveau contenu pour le incroyable paragraphe!'; // Ajout au contenu actuel: myIntro.innerHTML + = '… encore du contenu…'; Le seul problème avec cette méthode est qu'elle n'est spécifiée dans aucune norme et non dans la spécification DOM. Si cela ne vous dérange pas, allez-y, utilisez-le. De toute façon, il est normalement beaucoup plus rapide que les méthodes DOM classiques, que nous couvrirons ensuite..
Lors de la création de contenu via l'API DOM, vous devez connaître deux types de nœuds différents, un nœud d'élément et un nœud de texte. Il existe de nombreux autres types de nœuds mais ces deux sont les seuls importants pour l'instant..
Pour créer un élément, utilisez la méthode 'createElement' et pour créer un nœud de texte, utilisez la méthode 'createTextNode'. Ces deux éléments sont illustrés ci-dessous:
var myIntro = document.getElementById ('intro'); // Nous voulons ajouter du contenu au paragraphe: var someText = 'Ceci est le texte que je veux ajouter'; var textNode = document.createTextNode (someText); myIntro.appendChild (textNode); Ici, nous utilisons la méthode 'appendChild' pour ajouter notre nouveau nœud de texte au paragraphe. Cette procédure prend un peu plus de temps que la méthode innerHTML non standard, mais il est toujours important de connaître les deux méthodes afin de pouvoir prendre la bonne décision. Voici un exemple plus avancé utilisant des méthodes DOM:
var myIntro = document.getElementById ('intro'); // Nous voulons ajouter une nouvelle ancre au paragraphe: // Tout d'abord, nous créons le nouvel élément d'ancre: var myNewLink = document.createElement ('a'); // myNewLink.href = 'http://google.com'; // myNewLink.appendChild (document.createTextNode ('Visit Google')); // Visitez Google // Maintenant, nous pouvons l'ajouter au paragraphe suivant: myIntro.appendChild (myNewLink); Il existe également une méthode DOM 'insertBefore' qui est assez explicite. En utilisant ces deux méthodes ('insertBefore' & 'appendChild'), nous pouvons créer notre propre fonction 'insertAfter':
// 'Cible' est l'élément déjà présent dans le DOM // 'Bullet' est l'élément que vous souhaitez insérer dans la fonction insertAfter (target, bullet) target.nextSibling? target.parentNode.insertBefore (bullet, target.nextSibling): target.parentNode.appendChild (bullet); // Nous utilisons un opérateur ternaire dans la fonction ci-dessus: // Son format: CONDITION? EXPRESSION SI VRAI: EXPRESSION SI FALSE;
La fonction ci-dessus vérifie l'existence du prochain frère de la cible dans le DOM. Le cas échéant, elle insérera le nœud «puce» avant le prochain frère de la cible. Sinon, elle supposera que la cible est le dernier enfant d'un élément. c'est bien d'ajouter la balle en tant qu'enfant du parent. L'API DOM ne nous donne pas de méthode 'insertAfter' car elle n'est pas nécessaire - nous pouvons la créer nous-mêmes..
Il y a encore beaucoup à apprendre sur la manipulation d'éléments dans le DOM, mais ce qui précède devrait constituer une base suffisante sur laquelle vous pouvez construire.
Les événements de navigateur sont au cœur de toute application Web et de la plupart des améliorations de JavaScript. C'est à travers ces événements que nous définissons quand quelque chose va se passer. Si vous avez un bouton dans votre document et que vous avez besoin d'une validation de formulaire lorsque vous cliquez dessus, vous utiliserez l'événement 'click'. Vous trouverez ci-dessous un aperçu de la plupart des événements de navigateur standard:
Remarque: Comme nous en avons discuté la dernière fois, le DOM et le langage JavaScript sont deux entités distinctes. Les événements de navigateur font partie de l'API DOM, ils ne font pas partie de JavaScript.
Il y a beaucoup plus d'événements à choisir. Celles ci-dessus sont les principales que vous rencontrerez fréquemment en code JavaScript. Sachez que certains d'entre eux présentent des différences subtiles entre les navigateurs. Sachez également que de nombreux navigateurs implémentent des événements propriétaires. Par exemple, il existe de nombreux événements spécifiques à Gecko, tels que "DOMContentLoaded" ou "DOMMouseScroll". Vous pouvez en savoir plus à ce sujet ici: https://developer.mozilla.org / fr / Gecko-Specific_DOM_Events
Nous avons couvert les événements réels, mais nous n’avons pas encore discuté du processus d’attachement d’une fonction à un événement. C'est là que se passe la magie. Les événements énumérés ci-dessus se produiront tous, que vous ayez écrit du code JavaScript ou non. Par conséquent, pour exploiter leur pouvoir, vous devez enregistrer des "gestionnaires d'événements" - ce terme est élégant pour décrire une fonction utilisée pour gérer un événement. Voici un exemple simple utilisant le de base modèle d'enregistrement d'événement (également appelé "enregistrement d'événement traditionnel"):
Inscription à l'événement de base:
// JavaScript: var myElement = document.getElementById ('mon-bouton'); // Cette fonction sera notre gestionnaire d'événements: function buttonClick () alert ('Vous venez de cliquer sur le bouton!'); // Voici la partie relative à l'enregistrement d'événement: myElement.onclick = buttonClick; Nous avons un bouton HTML avec l'ID 'my-button' et nous y avons accédé à l'aide de la commande 'document.getElementById'. Ensuite, nous créons une nouvelle fonction qui est ensuite assignée à la propriété DOM 'onclick' du bouton. C'est tout ce qu'on peut en dire!
Le modèle "d'enregistrement d'événement de base" est aussi simple que possible. Vous préfixez l'événement que vous recherchez avec «on» et vous y accédez en tant que propriété de l'élément avec lequel vous travaillez. Ceci est essentiellement la version discrète de faire quelque chose comme ceci (que je ne recommande pas):
La gestion des événements en ligne (à l'aide d'attributs HTML) est très importune et rend votre site Web beaucoup plus difficile à gérer. Il est préférable d'utiliser du code JavaScript non intrusif et de le contenir dans des fichiers «.js» respectifs, qui peuvent être inclus dans le document à la demande. Bien que nous parlions de JavaScript non intrusif, je voudrais corriger l’idée fausse habituelle selon laquelle des bibliothèques telles que jQuery permettent "de coder de manière discrète" - ce n’est pas vrai. Lorsque vous utilisez jQuery, il est tout aussi facile de mal faire les choses. La raison pour laquelle vous ne devriez pas utiliser la gestion d'événements en ligne est exactement la même chose que la raison pour laquelle vous ne devriez pas appliquer de styles CSS en ligne (à l'aide de).
Inscription avancée à l'événement:
Ne laissez pas ce nom vous induire en erreur, le fait que son nom soit "avancé" ne signifie pas qu'il vaut mieux l'utiliser; En fait, la technique décrite plus haut ("enregistrement d'événement de base") convient parfaitement la plupart du temps. L'utilisation de la technique de base présente toutefois une limite essentielle. vous ne pouvez pas lier plus d'une fonction à un événement. Ce n'est pas si grave en fait, car vous pouvez simplement appeler un nombre quelconque de fonctions à partir de cette fonction unique, mais si vous avez besoin de plus de contrôle, il existe un autre moyen d'enregistrer les gestionnaires, entrez le "modèle d'enregistrement d'événement avancé"..
Ce modèle vous permet de lier plusieurs gestionnaires à un seul événement, ce qui signifie que plusieurs fonctions seront exécutées lorsqu'un événement se produit. De plus, ce modèle vous permet de supprimer facilement l’un des gestionnaires d’événements liés..
Strictement parlant, il existe deux modèles différents dans cette catégorie; le W3C et Microsoft. Le modèle W3C est pris en charge par tous les navigateurs modernes, à l'exception de IE, et le modèle de Microsoft n'est pris en charge que par IE. Voici comment vous utiliseriez le modèle du W3C:
// FORMAT: target.addEventListener (type, fonction, useCapture); // Exemple: var myIntro = document.getElementById ('intro'); myIntro.addEventListener ('click', introClick, false); Et voici la même chose, mais pour IE (modèle de Microsoft):
// FORMAT: target.attachEvent ('on' + type, fonction); // Exemple: var myIntro = document.getElementById ('intro'); myIntro.attachEvent ('onclick', introClick); Et voici la fonction 'introClick':
function introClick () alert ('Vous avez cliqué sur le paragraphe!'); Du fait qu'aucun modèle ne fonctionne dans tous les navigateurs, il est judicieux de les combiner dans une fonction personnalisée. Voici une fonction très basique 'addEvent', qui fonctionne sur plusieurs navigateurs:
fonction addEvent (elem, type, fn) if (elem.attachEvent) elem.attachEvent ('on' + type, fn); revenir; if (elem.addEventListener) elem.addEventListener (type, fn, false); La fonction recherche les propriétés 'attachEvent' et 'addEventListener', puis utilise l'un des modèles dépendant de ce test. Les deux modèles permettent également de supprimer les gestionnaires d'événements, comme le montre cette fonction 'removeEvent':
fonction removeEvent (elem, type, fn) if (elem.detachEvent) elem.detachEvent ('on' + type, fn); revenir; if (elem.removeEventListener) elem.removeEventListener (type, fn, false); Vous utiliseriez les fonctions comme ceci:
var myIntro = document.getElementById ('intro'); addEvent (myIntro, 'cliquez', fonction () alert ('vous m'avez cliqué !!!');); Notez que nous avons passé une fonction sans nom comme troisième paramètre. JavaScript nous permet de définir et d'exécuter des fonctions sans les nommer. Les fonctions de ce type sont appelées "fonctions anonymes" et peuvent être très utiles, en particulier lorsque vous devez passer une fonction en tant que paramètre à une autre fonction. Nous aurions pu simplement mettre notre fonction 'introClick' (définie plus tôt) comme troisième paramètre, mais il est parfois plus pratique de le faire avec une fonction anonyme.
Si vous voulez qu'une action ne se produise sur un événement que la première fois que vous cliquez dessus, vous pouvez faire quelque chose comme ceci:
// Notez que nous avons déjà défini les fonctions addEvent / removeEvent // (pour pouvoir les utiliser, elles doivent être incluses) var myIntro = document.getElementById ('intro'); addEvent (myIntro, 'click', oneClickOnly); function oneClickOnly () alert ('WOW!'); removeEvent (myIntro, 'click', oneClickOnly); Nous supprimons le gestionnaire dès que l'événement est déclenché pour la première fois. Nous n'avons pas été en mesure d'utiliser une fonction anonyme dans l'exemple ci-dessus, car nous devions conserver une référence à la fonction ('oneClickOnly') afin de pouvoir la supprimer ultérieurement. Cela dit, il est en fait possible de réaliser une fonction non nommée (anonyme):
addEvent (myIntro, 'click', function () alert ('WOW!'); removeEvent (myIntro, 'click', arguments.callee);); Nous sommes assez effrontés ici en référençant la propriété 'appelée' de l'objet 'arguments'. L'objet 'arguments' contient tous les paramètres passés de toute fonction et contient également une référence à la fonction elle-même ('appelée'). En faisant cela, nous éliminons complètement le besoin de définir une fonction nommée (par exemple, la fonction 'oneClickOnly' montrée précédemment).
Outre les différences syntaxiques évidentes entre la mise en œuvre du W3C et de Microsoft, il existe d'autres différences qui méritent d'être signalées. Lorsque vous liez une fonction à un événement, celle-ci doit être exécutée dans le contexte de l'élément. Par conséquent, le mot clé 'this' dans la fonction doit faire référence à l'élément. Si vous utilisez le modèle d’enregistrement d’événement de base ou le modèle avancé du W3C, cela fonctionne sans erreur, mais l’implémentation de Microsoft échoue. Voici un exemple de ce que vous devrait être capable de faire dans les fonctions de gestion d'événement:
function myEventHandler () this.style.display = 'none'; // fonctionne correctement, 'this' fait référence à l'élément: myIntro.onclick = myEventHandler; // fonctionne correctement, 'this' fait référence à l'élément: myIntro.addEventListener ('click', myEventHandler, false); // NE FONCTIONNE PAS correctement, 'this' fait référence à l'objet Window: myIntro.attachEvent ('onclick', myEventHandler); Il existe différentes manières d'éviter / de résoudre ce problème. De loin, l'option la plus simple consiste à utiliser le modèle de base - il n'y a pratiquement aucune incohérence entre les navigateurs lors de l'utilisation de ce modèle. Si, toutefois, vous voulez utiliser le modèle avancé et que vous avez besoin du mot clé 'this' pour référencer l'élément correctement, vous devriez jeter un coup d'œil à certaines des fonctions 'addEvent' les plus largement adoptées, en particulier celles de John Resig ou de Dean Edward. n'utilisez même pas le modèle avancé, superbe!).
Un aspect important de la gestion des événements dont nous n’avons pas encore parlé est ce qu’on appelle «l’objet événement». Chaque fois que vous liez une fonction à un événement, c’est-à-dire chaque fois que vous créez un gestionnaire d’événements, la fonction reçoit un objet. Cela se produit de manière native, vous n'avez donc pas besoin de prendre des mesures pour le provoquer. Cet objet événement contient diverses informations sur l'événement qui vient de se produire. il contient également des méthodes exécutables ayant divers effets comportementaux sur l'événement. Mais, sans surprise, Microsoft a choisi sa propre méthode pour implémenter cette "fonctionnalité"; Les navigateurs IE ne transmettent pas cet objet événement, vous devez y accéder en tant que propriété de l’objet window global; ce n'est pas vraiment un problème, c'est juste une nuisance:
function myEventHandler (e) // Notez l'argument 'e'… // Lorsque cette fonction est appelée, à la suite de l'événement // qui se déclenche, l'objet de l'événement est transmis (dans les agents conformes au W3C) // Créons ' e 'convivial pour tous les navigateurs: e = e || window.event; // Maintenant, nous pouvons référencer le 'e' en toute sécurité dans tous les navigateurs modernes. // Nous lions notre fonction à un événement ici…
Afin de vérifier l’existence de l’objet 'e' ("objet Event"), nous utilisons un opérateur OR (logique) qui dicte en principe ce qui suit: si "e" est une valeur "falsifiée" (null, indéfinie, 0 etc.) puis assignez 'window.event' à 'e'; sinon, utilisez simplement 'e'. C'est un moyen simple et rapide d'obtenir le véritable objet Event dans un environnement multi-navigateurs. Si vous n'êtes pas à l'aise avec l'utilisation d'opérateurs logiques en dehors d'une instruction IF, cette construction pourrait vous convenir davantage:
if (! e) e = window.event; // Aucune instruction ELSE n'est nécessaire car 'e' // sera déjà défini dans d'autres navigateurs
Certaines des commandes et propriétés les plus utiles de cet objet événement sont malheureusement implémentées de manière incohérente sur tous les navigateurs (notamment IE par rapport aux autres). Par exemple, il est possible d'annuler l'action par défaut d'un événement à l'aide de la méthode "preventDefault ()" de l'objet Event, mais dans Internet Explorer, elle ne peut être obtenue qu'à l'aide de la propriété "returnValue" de l'objet. Donc, encore une fois, nous devons utiliser les deux pour pouvoir accueillir tous les navigateurs:
fonction myEventHandler (e) e = e || window.event; // Prévention de l'action par défaut d'un événement: if (e.preventDefault) e.preventDefault (); else e.returnValue = false;
L'action par défaut d'un événement est ce qui se produit normalement à la suite de son déclenchement. Lorsque vous cliquez sur un lien d'ancrage, l'action par défaut du navigateur consiste à accéder à l'emplacement spécifié dans l'attribut 'href' de ce lien. Mais parfois, vous voudrez désactiver cette action par défaut.
Le désagrément 'returnValue' / 'preventDefault' n'est pas en soi; de nombreuses autres propriétés de l'objet Event sont implémentées de manière incohérente, ainsi, si le modèle / else / ou check est une tâche requise.
Aujourd'hui, de nombreuses bibliothèques JavaScript normalisent l'objet événement, ce qui signifie que des commandes telles que 'e.preventDefault' seront disponibles dans IE, bien que vous remarquiez qu'en arrière-plan, la propriété 'returnValue' est toujours utilisée..
La propagation d'événement, également appelée "propagation d'événement", se produit lorsqu'un événement est déclenché et que cet événement "bouillonne" ensuite dans le DOM. La première chose à noter est que tous les événements ne bouillonnent pas, mais pour ceux qui le font, voici comment cela fonctionne:
L'événement est déclenché sur l'élément cible. L'événement se déclenche ensuite sur chacun des ancêtres de cet élément - l'événement bouillonne à travers le DOM jusqu'à ce qu'il atteigne l'élément le plus haut:
Comme le montre le graphique ci-dessus, si vous cliquez sur une ancre dans un paragraphe, l'événement click de celle-ci se déclenche en premier, suivi de l'événement clic jusqu'à ce que l'élément body soit atteint (le corps est l'élément le plus élevé du DOM. qui a un événement de clic).
Ces événements vont se déclencher dans cet ordre, ils ne se produisent pas tous en même temps.
L’idée de la formation d’événements n’a peut-être pas beaucoup de sens au début, mais il devient finalement évident qu’il s’agit d’un élément fondamental de ce que nous considérons comme un "comportement normal". Lorsque vous liez un gestionnaire à l'événement click du paragraphe, vous vous attendez à ce qu'il soit déclenché à chaque clic sur le paragraphe, n'est-ce pas? Eh bien, c’est exactement ce que "l’événement bouillonnant" garantit - si le paragraphe a plusieurs enfants, (s,
Ce comportement de formation de bulles peut être arrêté à tout moment du processus. Donc, si vous voulez seulement que l'événement apparaisse jusqu'au paragraphe mais pas plus loin (pas au nœud du corps), vous pouvez utiliser une autre méthode utile trouvée dans l'objet Event, "stopPropagation":
fonction myParagraphEventHandler (e) e = e || window.event; // Arrêt de la propagation des événements: if (e.stopPropagation) // Navigateurs compatibles W3C: e.stopPropagation (); else // IE: e.cancelBubble = true; // La fonction serait liée à l'événement click du paragraphe: // Utilisation de notre fonction addEvent sur mesure: addEvent (document.getElementsByTagName ('p') [0], 'cliquez', myParagraphEventHandler); Disons, par exemple, que vous avez une table massive avec beaucoup de lignes de données. Lier un gestionnaire d’événements click à chaque single
var myTable = document.getElementById ('ma-table'); myTable.onclick = function () // Traitement des incompatibilités de navigateur: e = e || window.event; var targetNode = e.target || e.srcElement; // Teste s'il s'agit d'un TR sur lequel on a cliqué: if (targetNode.nodeName.toLowerCase () === 'tr') alert ('Vous avez cliqué sur une ligne du tableau!'); La délégation d'événements repose sur la propagation d'événements. Le code ci-dessus ne fonctionnerait pas si le bullage était arrêté avant d'atteindre le noeud 'table'.
Nous avons expliqué comment manipuler les éléments du DOM et nous avons abordé de manière approfondie le modèle d’événement du navigateur. J'espère que vous avez appris quelque chose aujourd'hui! Comme d'habitude, si vous avez des questions, n'hésitez pas à demander.
