Introduction à plusieurs méthodes de liaison des événements de clic à en HTML

Il existe trois façons de lier des événements à des boutons en HTML.

Par exemple, les balises suivantes :

<button type="submit" id="btn_submit"> submit </button>

1. Utilisez jquery pour la liaison

$('#btn_submit').click(function(){
});

2. Utilisez la liaison js native (Remarque : Internet Explorer 8 et les versions antérieures d'IE ne prennent pas en charge la méthode addEventListener(), pas plus qu'Opera 7.0 et Opera antérieurs. Versions prises en charge. Ce type de version de navigateur doit utiliser la méthode attachEvent() pour ajouter des événements )

document.getElementById("#btn_submit").addEventListener(‘click’, function(){
}, false);

Supplément : le troisième paramètre de addEventListener est utilisé pour déterminer le modèle d'événement. Lorsque l'élément parent et l'élément enfant sont liés à l'événement, ce paramètre détermine quel événement est déclenché en premier. False indique le modèle d'événement bouillonnant : c'est-à-dire l'événement lié à l'élément enfant. Répondez d'abord, puis répondez à l'événement lié à l'élément parent. True demande au modèle d'événement de capture, qui est opposé à l'ordre d'exécution du modèle d'événement bouillonnant, tel que :

<p id="test_p">   
<button type="button" value ="测试事件顺序" name="测试事件顺序" id="test_button">测试事件顺序</button></p>
document.getElementById(&#39;test_p&#39;).addEventListener(&#39;click&#39;, function () {        
console.log(&#39;p&#39;);    
},true)    
document.getElementById(&#39;test_button&#39;).addEventListener(&#39;click&#39;, function(){        
console.log(&#39;test1&#39;);    
},false);

dans cet exemple Le modèle d'événement est un modèle de capture. Il exécutera d'abord l'événement p puis l'événement bouton. Il y a quelque chose à noter ici : ce qui détermine le. Le modèle d'événement est le troisième paramètre passé lorsque l'élément parent lie l'événement, comme la liaison de bouton dans l'exemple ci-dessus. Le troisième paramètre passé dans l'événement n'a aucun effet sauf s'il contient des éléments enfants.

3. Utilisez la liaison onclick directement dans la balise bouton

<button type="submit" id="btn_submit" onclick="btnAction()"> submit </button>

, puis définissez-la dans la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a méthode tag btnAtion

<script>        
function btnAction()        { }
</script>

Comparaison :

1. Utiliser jquery, le code est concis et facile à utiliser. La méthode de liaison d'événement est la liaison d'ajout, c'est-à-dire que autant de méthodes que de liaisons sont exécutées.

Dans la condition d'une liaison unique, puisque la couche inférieure de jQuery est en fait implémentée dans js, la différence de vitesse n'est pas grande. Au moins l'étape "contraignante" ne deviendra pas un goulot d'étranglement pour la vitesse, à moins qu'elle ne soit liée sur la page L'événement comporte plus de dizaines de milliers d'éléments, sinon il n'y a pas lieu de s'inquiéter de la vitesse de réponse . Le simple fait d'effectuer une liaison d'événement est toujours très rapide.

Donc fait des "petits programmes" avec des exigences moins strictes comme la charge, du point de vue de la maintenance, il est recommandé d'utiliser la liaison jQuery, qui est simple, claire et facile à maintenir.

2. Par rapport à jquery, la quantité de code est légèrement plus grande lors de l'utilisation de js natif, mais cela permet aux gens de mieux comprendre les détails de la liaison d'événement. ceux qui connaissent le js natif Il est recommandé aux développeurs .

3. En utilisant la liaison de balise onclick, la quantité de code n'est pas importante, mais le front-end html et le front-end js sont mélangés, ce qui n'est pas facile à maintenir.

En principe, le code HTML ne peut refléter que la structure d'une page Web, et des comportements spécifiques doivent être liés à l'aide de code javascript.

Si vous utilisez l'événement onclick pour mélanger des js dans HTML, cela entraînera le travail du front html- end et js front-end doivent être mélangés Ensemble, il est difficile de séparer les tâches de travail, ce qui rend la maintenance difficile. Cette approche convient au débogage temporaire, mais si elle ne doit pas apparaître dans le produit fini officiel,

Il n'est donc pas recommandé d'utiliser la balise onclick pour lier des événements.

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!