Introduction à plusieurs méthodes de liaison des événements de clic à <button> en HTML-tutoriel HTML-php.cn

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>

Copier après la connexion

1. Utilisez jquery pour la liaison

$(&#39;#btn_submit&#39;).click(function(){
});

Copier après la connexion

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);

Copier après la connexion

<🎜. >

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);

Copier après la connexion

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>

Copier après la connexion

, puis définissez-la dans la balise

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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

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

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