Quels sont les moyens de lier des événements en javascript-js tutoriel-php.cn

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

青灯夜游

Libérer： 2021-06-17 15:47:06

original

3375 Les gens l'ont consulté

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.

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

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

[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!