Comment un élément HTML fonctionne-t-il?

Question

Je veux savoir quelques connaissances détaillées sur le mécanisme d'événement élément HTML. Par exemple, si nous utilisons des événements JQuery, nous pouvons trouver la liaison d'événement dans le fichier source JQuery. Comme la façon dont les événements se lient en interne dans l'élément HTML?

Merci d'avance.

Answer 1

D'abord, il s'agit de l'API JavaScript implémentée dans le navigateur et non l'inverse. Bien que vous puissiez utiliser le onclick="doSomeStuff()"attribute (voir les exemples ci-dessous), ou le addEventListenermethod, toutes les méthodes vous permettent maintenant de bind le gestionnaire d'un élément mais il y a quelques petites différences.

Méthode 1 - définir votre bouton avec onclick attribut puis définissez le gestionnaire

Vous pouvez simplement brancher un gestionnaire à votre HTMLElement comme si, avec l'attribut onclick:

<button id="myButton" onclick="doSomeStuff()" type="button"> 
 
    Click <span class="my-child-selector">ME</span> 
 
</button> 
 

 
<script> 
 
function doSomeStuff(){ 
 
    element.innerHTML = 'CLICKED ELEMENT'; 
 
} 
 
</script>

La balise <script> doit toujours être la deuxième car nous n'utilisons pas DOMContentLoaded événement (jQuery(document).ready(callback)). Notez que nous n'avons pas accès à l'objet event en utilisant cette méthode.

Méthode 2 - définir la Parfois, nous écrivons comme onclick attribut via JavaScript

cela, il est un peu mieux:

<button id="myButton" type="button"> 
 
    Click <span class="my-child-selector">ME</span> 
 
</button> 
 

 
<script> 
 
    // elements 
 
    var element = document.getElementById('myButton'), 
 
    child = element.querySelector('.my-child-selector'); 
 

 
    function doSomeStuff(event) { 
 

 
    // we have access to the event object 
 
    // get to know the event target 
 
    var target = event.target; 
 

 
    // respond only when the button element is clicked 
 
    if (target === element) { 
 
     element.innerHTML = 'CLICKED ELEMENT'; 
 

 
     // or delegate to a child 
 
    } else if (target.parentNode === element) { 
 
     element.innerHTML = 'CLICKED CHILD'; 
 
    } 
 
    } 
 

 
    // add listener to your element 
 
    element.onclick = doSomeStuff; 
 

 
    // alternativelly you can also write an anonymous function 
 
    // element.onclick = function(event){ /* do the stuff with event object access*/ }; 
 
</script>

Notez que nous avons maintenant accès à l'objet event et nous pouvons déléguer correctement le gestionnaire.

Méthode 3 - définir le bouton et attacher gestionnaire via addEventListener

La nouvelle API JavaScript est un miles mieux pour la performance, plus de flexibilité et un entretien plus facile, essentiellement la meilleure façon:

<button id="myButton" type="button"> 
 
    Click <span class="my-child-selector">ME</span> 
 
</button> 
 

 
<script> 
 
    // elements 
 
    var element = document.getElementById('myButton'), 
 
    child = element.querySelector('.my-child-selector'); 
 

 
    function doSomeStuff(event) { 
 

 
    // we have access to the event object 
 
    // get to know the event target 
 
    var target = event.target; 
 

 
    // respond only when the button element is clicked 
 
    if (target === element) { 
 
     element.innerHTML = 'CLICKED ELEMENT'; 
 

 
     // or delegate to a child 
 
    } else if (target.parentNode === element) { 
 
     element.innerHTML = 'CLICKED CHILD'; 
 
    } 
 
    } 
 

 
    // add listener to your element 
 
    element.addEventListener('click', doSomeStuff, false); 
 
</script>

comme alternative à cette méthode, vous pouvez également créer une fonction anonyme comme la main ler, pour des cas d'utilisation uniques, lorsque vous voulez un certain comportement pour un élément très spécifique.

// add listener to your element 
myUniqueElement.addEventListener('click', function (event){ 
    // do some stuff with access to event object 
}, false); 

Ceci est à peu près tout ce que vous devez savoir sur la manipulation et de déléguer des événements, mais ne hésitez pas à demander quoi que ce soit si vous n'êtes pas certain de quelque chose.