Heim > Artikel > Web-Frontend > Welche Möglichkeiten gibt es, Ereignisse in Javascript zu binden?

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

青灯夜游Original: 2021-06-17 15:47:063338Durchsuche

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.

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>

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

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

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-Struktur Welche 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>

**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>

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

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

Stellungnahme：

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

Vorheriger Artikel：So ersetzen Sie alle Zeichen in einer Javascript-ZeichenfolgeNächster Artikel：So ersetzen Sie alle Zeichen in einer Javascript-Zeichenfolge

In Verbindung stehende Artikel

Mehr sehen