Heim > Web-Frontend > js-Tutorial > Hauptteil

Welche Möglichkeiten gibt es, Ereignisse in Javascript zu binden?

青灯夜游
Freigeben: 2021-06-17 15:47:06
Original
3375 Leute haben es durchsucht

Bindungsmethode: 1. Verwenden Sie das Attribut „onclick“ direkt im Tag, um das Ereignis zu binden. 2. Verwenden Sie die Anweisung „object.onclick=function(){event}“, um das Ereignis zu binden. Die Anweisung „attachEvent(' click',function(){event})“ bindet das Ereignis.

Welche Möglichkeiten gibt es, Ereignisse in Javascript zu binden?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

So binden Sie Ereignisse in JavaScript

Lassen Sie mich zunächst die drei Methoden vorstellen, die wir normalerweise zum Binden von Ereignissen verwenden.

1. Ereignisse direkt in Tags binden

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

<script>
function open(){
	alert(1)
}
</script>
Nach dem Login kopieren

2. Verwenden Sie JavaScript-Objekte, um Ereignisse zu binden

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

Erweiterte Informationen: ###Ereignisdelegation

Die Lösung für das Problem „zu viele Event-Handler“ ist die Event-Delegation. Die Ereignisdelegation nutzt das Ereignis-Bubbling, und es kann nur ein Ereignishandler entwickelt werden, um alle Ereignisse eines bestimmten Typs zu verwalten. Klickereignisse gelangen beispielsweise immer bis zur Dokumentebene. Das heißt, wir können nur den Onclick-Ereignishandler angeben, anstatt jedem Ereignis separat Handler hinzuzufügen.

Sehen wir uns ein Beispiel für schriftliche Alibaba-Testfragen an.

Stil und DOM-StrukturWelche Möglichkeiten gibt es, Ereignisse in Javascript zu binden?

<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>
Nach dem Login kopieren

**Es ist keine Ereignisdelegation erforderlich. **Die Kosten dieser Methode sind eine große Leistungsverschwendung. Wenn Tausende von Daten vorhanden sind, bleibt die -Seite stark hängen oder stürzt sogar ab.

 <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>
Nach dem Login kopieren

Verwenden Sie die Ereignisdelegierung, um das Ereignis nur einmal zu binden, was den Leistungsverlust erheblich reduziert. Es ist auch eine sehr gute Lösung, wenn eine große Anzahl von Event-Handlern benötigt wird.

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();
Nach dem Login kopieren

【Verwandte Empfehlungen: Javascript-Lern-Tutorial

Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, Ereignisse in Javascript zu binden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!