Maison >interface Web >js tutoriel >Quels sont les moyens de lier des événements en javascript

Quels sont les moyens de lier des événements en javascript

青灯夜游original: 2021-06-17 15:47:063434parcourir

Méthode de liaison : 1. Utilisez l'attribut "onclick" directement dans la balise pour lier l'événement ; 2. Utilisez l'instruction "object.onclick=function(){event}" pour lier l'événement ; Utilisez l'instruction "object .attachEvent('click',function(){event})" pour lier l'événement.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Comment lier des événements en JavaScript

Tout d'abord, permettez-moi de vous présenter les trois méthodes que nous utilisons habituellement pour lier des événements.

1. Lier les événements directement dans les balises

<button onclick="open()">按钮</button>

<script>
function open(){
	alert(1)
}
</script>

2. Utilisez des objets JavaScript pour lier les événements

<button id="btn">按钮</button>
<script>
document.getElementById(&#39;btn&#39;).onclick = function(){
	alert(1)
}
</script>

3. Surveillance des événements

<button id="btn">按钮</button>
<script>
document.getElementById(&#39;btn&#39;).addEventListener(&#39;click&#39;,function(){
	alert(1)
})
//兼容IE
document.getElementById(&#39;btn&#39;).attachEvent(&#39;click&#39;,function(){
	alert(1)
})
</script>

Informations étendues : ###Délégué d'événement

Réponse à "Trop de gestionnaires d'événements" La solution le problème est la délégation d'événements. La délégation d'événements tire parti du bouillonnement d'événements et un seul gestionnaire d'événements peut être développé pour gérer tous les événements d'un certain type. Par exemple, les événements de clic remontent toujours jusqu'à la couche de document. Autrement dit, nous pouvons uniquement spécifier le gestionnaire d'événements onclick au lieu d'ajouter des gestionnaires à chaque événement séparément.

Regardons un exemple de questions de test écrit d'Alibaba.

Quels sont les moyens de lier des événements en javascript

Style et structure DOM

 <style>
   * {
     padding: 0;
     margin: 0;
   }
   
   .head, li div {
     display: inline-block;
     width: 70px;
     text-align: center;
   }

   li .id, li .sex, .id, .sex {
     width: 15px;
   }

   li .name, .name {
     width: 40px;
   }

   li .tel, .tel {
     width: 90px;
   }

   li .del, .del {
     width: 15px;
   }

   ul {
     list-style: none;
   }

   .user-delete {
     cursor: pointer;
   }

 </style>
</head>

<body>
<div id="J_container">
	<div class="record-head">
	  <div class="head id">序号</div><div class="head name">姓名</div><div class="head sex">性别</div><div class="head tel">电话号码</div><div class="head province">省份</div><div class="head">操作</div>
	</div>
   <ul id="J_List">
     <li><div class="id">1</div><div class="name">张三</div><div class="sex">男</div><div class="tel">13788888888</div><div class="province">浙江</div><div class="user-delete">删除</div></li>
     <li><div class="id">2</div><div class="name">李四</div><div class="sex">女</div><div class="tel">13788887777</div><div class="province">四川</div><div class="user-delete">删除</div></li>
     <li><div class="id">3</div><div class="name">王二</div><div class="sex">男</div><div class="tel">13788889999</div><div class="province">广东</div><div class="user-delete">删除</div></li>
   </ul>
 </div>
 </body>

** Aucune délégation d'événement n'est requise. **Le coût de cette méthode représente un gaspillage important de performances. S'il y a des milliers de données, la page sera gravement bloquée, voire plantera.

function Contact(){
    this.init();
}
	

Contact.prototype.init = function(){
	var userdel = document.querySelectorAll(&#39;.user-delete&#39;);
	for(var i=0;i<lis.length;i++){
		(function(j){
			userdel[j].onclick = function(){
	userdel[j].parentNode.parentNode.removeChild(userdel[j].parentNode);
			}
		})(i);
	}	
}

new Contact();

Utilisez la délégation d'événement pour lier l'événement une seule fois, ce qui réduit considérablement la perte de performances. C'est également une très bonne solution lorsqu'un grand nombre de gestionnaires d'événements sont requis.

function Contact(){
    this.init();
}
	
Contact.prototype.init = function(){
	var lis = document.querySelector(&#39;#J_List&#39;);
	lis.addEventListener(&#39;click&#39;, function(e){
		var target = e.target || e.srcElement;
		if (!!target && target.className.toLowerCase()===&#39;user-delete&#39;) {
		}
	})
}

new Contact();

[Recommandations associées : Tutoriel d'apprentissage Javascript]

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment remplacer tous les caractères d'une chaîne javascriptArticle suivant：Comment remplacer tous les caractères d'une chaîne javascript

Articles Liés

Voir plus