Beispiele zur Erläuterung der Javascript-Registrierungsereignisverarbeitungsfunktion_Javascript-Fähigkeiten-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Beispiele zur Erläuterung der Javascript-Registrierungsereignisverarbeitungsfunktion_Javascript-Fähigkeiten

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:20 PM

javascript 事件处理注册

Ereignisse sind der Kerninhalt von JavaScript und ihre Bedeutung wird hier nicht vorgestellt. Nachdem das Ereignis ausgelöst wurde, ist eine Ereignisverarbeitungsfunktion erforderlich, um es zu verarbeiten. Beispielsweise können wir festlegen, dass der Hintergrund eines Divs auf Grün gesetzt wird. Schauen wir uns dann zunächst an, wie dies erreicht wird Dieser Effekt lautet wie folgt:

<html> 
<head> 
<meta charset=" utf-8"> 
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
 width:100px;
 height:100px;
 background-color:red;
}
</style>
<script type="text/javascript"> 
function changebg(){
 var mydiv=document.getElementById("mydiv");
 mydiv.style.backgroundColor="green";
}
</script>
</head>
<body>
 <div id="mydiv"></div>
 <button id="bt">点击查看效果</button> 
</body>
</html>

Nach dem Login kopieren

Im obigen Code wird durch Klicken auf die Schaltfläche die Hintergrundfarbe des Div auf Grün gesetzt. Dies liegt daran, dass der Code eine Ereignishandlerfunktion für das Onclick-Ereignis der Schaltfläche registriert zu grün. Lassen Sie uns anhand von Beispielen kurz vorstellen, wie Ereignisverarbeitungsfunktionen für Objektereignisse registriert werden:
Methode 1:
Registrieren Sie die Ereignisverarbeitungsfunktion direkt im HTML-Code, dh legen Sie die Ereignisverarbeitungsfunktion direkt über das HTML-Attribut fest. Der von der Ereignisverarbeitungsfunktion auszuführende Code ist der HTML-Attributwert Artikel. Die Vor- und Nachteile sind wie folgt:

1. Leicht zu verstehen und zu verwenden.
2. Alle gängigen Browser unterstützen diese Methode.
3. Vermischt mit HTML-Code, wodurch die Seite sehr kompliziert wird und nicht mit dem Prinzip der Trennung von Leistung und Inhalt vereinbar ist.
4. Es kann nur ein Ereignishandler desselben Typs für dasselbe Objekt registriert werden.

Methode 2:
Im Ereignishandle-Modus ist das sogenannte Ereignishandle eine Ereignisverarbeitungsfunktion, und das angegebene Ereignis des angegebenen Objekts entspricht einem Ereignishandler. Um eine Ereignisverarbeitungsfunktion auf diese Weise zu registrieren, müssen Sie zunächst einen Verweis auf das Objekt abrufen und dann das Ereignishandle dem entsprechenden Ereignisverarbeitungsfunktionsattribut des Objekts zuweisen. Tatsächlich ist Methode eins auch eine Art Event-Handler-Methode.
Das Codebeispiel lautet wie folgt:

<html> 
<head> 
<meta charset=" utf-8"> 
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
 width:100px;
 height:100px;
 background-color:red;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
 var mydiv=document.getElementById("mydiv");
 var bt=document.getElementById("bt");
 bt.onclick=function(){
  mydiv.style.backgroundColor="green";
 }
}
</script>
</head>
<body>
 <div id="mydiv"></div>
 <button id="bt">点击查看效果</button>
</body>
</html>

Nach dem Login kopieren

Im obigen Code verwenden Sie zunächst document.getElementById("bt"), um einen Verweis auf das Schaltflächenobjekt abzurufen, und weisen Sie dann das Ereignishandle (Ereignisbehandlungsfunktion) dem Ereignisattribut onclick des Schaltflächenobjekts zu onclick wird ausgelöst, wenn auf die Schaltfläche geklickt wird, und führt dann den Code im Ereignishandler aus. Die Vor- und Nachteile sind wie folgt:

1. Einfach und leicht verständlich.
Unterstützt von 2 Browsern.
3. Es kann nur ein Ereignishandler desselben Typs für dasselbe Objekt registriert werden.

Methode 3:
Es handelt sich um eine erweiterte Ereignisregistrierungsmethode, nämlich den Ereignis-Listener. Diese Methode löst das Problem, dass in einem bestimmten Objekt nur eine Handlerfunktion für einen bestimmten Ereignistyp registriert werden kann. Es gibt jedoch bestimmte Kompatibilitätsprobleme, die im Folgenden vorgestellt werden:
1).IE-Browser:
Im IE-Browser können Sie die Methoden attachmentEvent() und detachEvent() verwenden, um Ereignisbehandlungsfunktionen für das angegebene Objekt zu registrieren und die registrierten Ereignisbehandlungsfunktionen zu löschen.
Das Syntaxformat ist wie folgt:
element.attachEvent("onevent",eventListener)
Diese Funktion verfügt über zwei Parameter: Der erste Parameter ist der Name des Ereignistyps und der zweite Parameter ist die zu registrierende Ereignishandlerfunktion.
Das Codebeispiel lautet wie folgt:

<html> 
<head> 
<meta charset=" utf-8"> 
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
 width:100px;
 height:100px;
 background-color:red;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
 var mydiv=document.getElementById("mydiv");
 var bt=document.getElementById("bt");
  
 bt.attachEvent("onclick",changebg);
  
 function changebg(){
  mydiv.style.backgroundColor="green";
 }
}
</script>
</head>
<body>
 <div id="mydiv"></div>
 <button id="bt">点击查看效果</button>
</body>
</html>

Nach dem Login kopieren

Der obige Code verwendet die Funktion attachmentEvent(), um den Onclick-Ereignishandler für die Schaltfläche zu registrieren, ist jedoch nur im IE-Browser gültig. Verwenden Sie die Funktion detachEvent(), um die ursprünglich registrierte Ereignisverarbeitungsfunktion zu trennen. Das Syntaxformat lautet wie folgt:
element.detachEvent("onevent",eventListener)
Das Format ist das gleiche wie bei der Funktion attachmentEvent().
Besonderer Hinweis: Der erste Parameter muss on enthalten. Das Click-Ereignis muss beispielsweise als „onclick“ geschrieben werden.
2). Standardbrowser:
Verwenden Sie in Standardbrowsern (einschließlich IE9 und IE9 und höher) die Funktionen addEventListener() und removeEventListener(), um Registrierungsverarbeitungsfunktionen zu registrieren und zu löschen.
Das Syntaxformat ist wie folgt:
element.addEventListener('event', eventListener, useCapture);
Diese Funktion hat drei Parameter. Der erste Parameter ist der Name des Ereignistyps. Der zweite Parameter ist die zu registrierende Ereignisverarbeitungsfunktion. Die dritte Funktion gibt an, ob diese Verarbeitungsfunktion während der Erfassungsphase des Ereignisübermittlungsprozesses aufgerufen wird. Die Stufe wird aufgerufen. Unter Standardbedingungen ist der Wert dieser Eigenschaft falsch, was bedeutet, dass der Ereignishandler während der Bubbling-Stufe aufgerufen wird.
Besonderer Hinweis: Der erste Parameter darf kein on enthalten. Beispielsweise kann das Click-Ereignis nicht als „onclick“ geschrieben werden, sondern muss als „click“ geschrieben werden.
Das Codebeispiel lautet wie folgt:

<html> 
<head> 
<meta charset=" utf-8"> 
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
 width:100px;
 height:100px;
 background-color:red;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
 var mydiv=document.getElementById("mydiv");
 var bt=document.getElementById("bt");
  
 bt.addEventListener("click",changebg);
  
 function changebg(){
  mydiv.style.backgroundColor="green";
 }
}
</script>
</head>
<body>
 <div id="mydiv"></div>
 <button id="bt">点击查看效果</button>
</body>
</html>

Nach dem Login kopieren

以上代码在IE9和IE9以上或者其他标准浏览器中，点击按钮可以将div的背景颜色设置为绿色。使用removeEventListener()函数可以解除原来注册的事件处理函数，语法格式如下:
element.removeEventListener('event', eventListener, useCapture);
格式和addEventListener()函数式一样的。
跨浏览器注册事件处理函数:
只要加个判断语句即可，代码如下:

var EventUtil={
  //注册
  addHandler: function(element, type, handler){
   if (element.addEventListener){
    element.addEventListener(type, handler, false);
   } else if (element.attachEvent){
    element.attachEvent("on" + type, handler);
   } else {
    element["on" + type] = handler;
   }
  },
  //移除注册
  removeHandler: function(element, type, handler){
   if (element.removeEventListener){
    element.removeEventListener(type, handler, false);
   } else if (element.detachEvent){
    element.detachEvent("on" + type, handler);
   } else {
    element["on" + type] = null;
   }
  }       
 };

Nach dem Login kopieren

以上就是本文的详细内容，希望对大家的学习有所帮助。

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Wie lange dauert es, um Split Fiction zu schlagen?

4 Wochen vor By DDD

R.E.P.O. Dateispeicherspeicherort: Wo ist es und wie schützt sie?

4 Wochen vor By DDD

Zwei -Punkte -Museum: Alle Exponate und wo man sie finden kann

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7369

Java-Tutorial

1628

CakePHP-Tutorial

1355

Laravel-Tutorial

1266

PHP-Tutorial

1215

Related knowledge

Wie registriere ich mehrere Konten bei Xiaohongshu? Werde ich entdeckt, wenn ich mehrere Konten registriere? Mar 25, 2024 am 09:41 AM

Als Plattform, die soziale Netzwerke und E-Commerce integriert, lockt Xiaohongshu immer mehr Nutzer an. Einige Benutzer möchten mehrere Konten registrieren, um die Interaktion mit Xiaohongshu zu verbessern. Wie kann man also mehrere Konten bei Xiaohongshu registrieren? 1. Wie registriere ich mehrere Konten bei Xiaohongshu? 1. Verwenden Sie zur Registrierung unterschiedliche Mobiltelefonnummern. Derzeit verwendet Xiaohongshu hauptsächlich Mobiltelefonnummern zur Registrierung von Konten. Benutzer versuchen manchmal, Karten mit mehreren Mobiltelefonnummern zu kaufen und damit mehrere Xiaohongshu-Konten zu registrieren. Dieser Ansatz weist jedoch einige Einschränkungen auf, da der Kauf mehrerer Mobilfunknummernkarten umständlich und kostspielig ist. 2. Verwenden Sie zur Registrierung zusätzlich zu Ihrer Mobiltelefonnummer auch Ihre E-Mail-Adresse, um ein Xiaohongshu-Konto zu registrieren. Benutzer können mehrere E-Mail-Adressen vorbereiten und diese E-Mail-Adressen dann zum Registrieren von Konten verwenden. Aber

So registrieren Sie ein Manwa Comics-Konto Feb 28, 2024 am 08:00 AM

Auf der Manwa Comics-Plattform gibt es umfangreiche Comic-Ressourcen, die darauf warten, von jedem erkundet zu werden. Solange Sie problemlos die offizielle Plattform von Manwa Comics betreten, können Sie alle Arten wunderbarer Comic-Werke genießen. Jeder Freund kann ganz einfach seine Lieblingscomics zum Lesen nach seinen eigenen Vorlieben finden. Wie registriere ich also das offizielle Konto von Manwa Comics? Der Herausgeber dieser Website stellt Ihnen dieses ausführliche Tutorial zur Verfügung, in der Hoffnung, allen Bedürftigen zu helfen. Manwa Comics – Offizieller Eingang: https://fuw11.cc/mw666 Download-Adresse der Manwa Comics-App: https://www.siemens-home.cn/soft/74440.html Eingang für Manwa Comics außerhalb des Festlandbereichs: https: /

Wie registriere ich ein Xiaohongshu-Konto? Was ist erforderlich, um ein Xiaohongshu-Konto zu registrieren? Mar 22, 2024 am 10:16 AM

Xiaohongshu, eine soziale Plattform, die Leben, Unterhaltung, Einkaufen und Teilen integriert, ist für viele junge Menschen zu einem unverzichtbaren Bestandteil des täglichen Lebens geworden. Wie registriert man also ein Xiaohongshu-Konto? 1. Wie registriere ich ein Xiaohongshu-Konto? 1. Öffnen Sie die offizielle Website von Xiaohongshu oder laden Sie die Xiaohongshu-APP herunter. Klicken Sie unten auf die Schaltfläche „Registrieren“ und Sie können verschiedene Registrierungsmethoden auswählen. Derzeit unterstützt Xiaohongshu die Registrierung mit Mobiltelefonnummern, E-Mail-Adressen und Konten von Drittanbietern (wie WeChat, QQ, Weibo usw.). 3. Geben Sie die relevanten Informationen ein. Geben Sie je nach ausgewählter Registrierungsmethode die entsprechende Mobiltelefonnummer, E-Mail-Adresse oder Kontoinformationen eines Drittanbieters ein. 4. Legen Sie ein Passwort fest. Legen Sie ein sicheres Passwort fest, um Ihr Konto zu schützen. 5. Schließen Sie die Verifizierung ab. Befolgen Sie die Anweisungen, um die Mobiltelefon- oder E-Mail-Verifizierung abzuschließen. 6. Vervollkommnen Sie den Einzelnen

So überprüfen Sie, was mit einer Mobiltelefonnummer registriert ist „Detaillierte Erklärung: APP-Abfragemethode für die Registrierung von Mobiltelefonnummern' Feb 07, 2024 am 08:24 AM

Ich weiß nicht, ob Sie eine solche Erfahrung machen. Ihr Mobiltelefon empfängt häufig unerklärliche Textnachrichten oder Registrierungsinformationen für einige Websites oder andere Verifizierungsinformationen. Tatsächlich ist unsere Mobiltelefonnummer möglicherweise an viele unbekannte Websites gebunden uns selbst Auch wenn Sie es nicht wissen, möchte ich Ihnen heute beibringen, wie Sie alle unbekannten Websites mit einem Klick entbinden können. Schritt 1: Öffnen Sie die Nummerndienstplattform. Diese Technik ist sehr praktisch. Die Schritte sind wie folgt: Öffnen Sie WeChat, klicken Sie auf das Pluszeichen im Suchfeld, wählen Sie „Freund hinzufügen“ und geben Sie dann die zu suchende Codenummer der Serviceplattform ein. Wir können sehen, dass es eine Nummerndienstplattform gibt, die einer öffentlichen Einrichtung gehört und vom Nationalen Institut für Informations- und Kommunikationstechnologie ins Leben gerufen wurde. Sie kann jedem helfen, Mobiltelefonnummerninformationen mit einem Klick zu lösen. Schritt 2: Überprüfen Sie, ob das Telefon für mich markiert wurde

So registrieren Sie 163 E-Mail Feb 14, 2024 am 09:20 AM

Einige Benutzer stellen fest, dass sie kein Konto haben, wenn sie das Postfach 163 verwenden möchten. Was sollten sie also tun, wenn sie zu diesem Zeitpunkt ein Konto registrieren müssen? Werfen wir nun einen Blick auf die vom Herausgeber bereitgestellte 163-E-Mail-Registrierungsmethode. 1. Durchsuchen Sie zunächst die offizielle Website von 163 Email im Browser und klicken Sie auf der Seite auf [Neues Konto registrieren]. 2. Wählen Sie dann [Kostenlose E-Mail] oder [VIP-E-Mail] aus. 3. Geben Sie abschließend die Informationen ein und klicken Sie auf [Jetzt einfach registrieren];

Wie registriere ich ein Xiaohongshu-Konto? Wie kann ich eine Wiederherstellung durchführen, wenn das Konto abnormal ist? Mar 21, 2024 pm 04:57 PM

Als eine der beliebtesten Lifestyle-Sharing-Plattformen der Welt hat Xiaohongshu eine große Anzahl von Nutzern angezogen. Wie registriert man also ein Xiaohongshu-Konto? Dieser Artikel führt Sie ausführlich in den Registrierungsprozess des Xiaohongshu-Kontos ein und beantwortet die Frage, wie Sie Anomalien des Xiaohongshu-Kontos wiederherstellen können. 1. Wie registriere ich ein Xiaohongshu-Konto? 1. Laden Sie die Xiaohongshu-App herunter: Suchen Sie die Xiaohongshu-App im Mobile App Store, laden Sie sie herunter und öffnen Sie sie nach Abschluss der Installation. 2. Registrieren Sie ein Konto: Klicken Sie nach dem Öffnen der Xiaohongshu-APP auf die Schaltfläche „Ich“ in der unteren rechten Ecke der Startseite und wählen Sie dann „Registrieren“. 3. Geben Sie die Registrierungsinformationen ein: Geben Sie die Mobiltelefonnummer ein, legen Sie das Passwort, den Bestätigungscode und andere Registrierungsinformationen entsprechend den Anweisungen fest. 4. Vervollständigen Sie Ihre persönlichen Daten: Befolgen Sie nach erfolgreicher Registrierung die Anweisungen zur Vervollständigung persönlicher Daten wie Name, Geschlecht, Geburtstag usw. 5. Einstellungen

So registrieren Sie ein qooapp-Konto Mar 19, 2024 pm 08:58 PM

qooapp ist eine Software, die viele Spiele herunterladen kann. Wie registriert man also ein Konto? Benutzer müssen auf die Schaltfläche „Registrieren“ klicken, wenn sie noch keinen Pass haben, und dann eine Registrierungsmethode auswählen. Diese Einführung in die Kontoregistrierungsmethode reicht aus, um Ihnen die Bedienung zu erklären. Im Folgenden finden Sie eine detaillierte Einführung. Werfen Sie also einen Blick darauf. Wie registriere ich ein qooapp-Konto? Klicken Sie auf „Registrieren“, und wählen Sie dann eine Registrierungsmethode aus: 1. Klicken Sie unten auf „Jetzt bewerben“. 2. Wählen Sie dann die gewünschte Anmeldemethode. 3. Sie können es anschließend direkt verwenden. Offizielle Website-Registrierung: 1. Öffnen Sie die Website https://apps.ppaooq.com/ und klicken Sie auf die obere rechte Ecke, um sich zu registrieren. 2. Wählen Sie Registrierung

Wie registriere ich zwei B-Site-Nummern mit einer Mobiltelefonnummer? Wie entbindet Station B ihr Mobiltelefon? Mar 21, 2024 pm 10:10 PM

Bilibili (Bilibili) hat als Video-Sharing-Website, die bei jungen Chinesen sehr beliebt ist, eine große Anzahl von Nutzern angezogen. Manche Nutzer wünschen sich zwei Bilibili-Konten, damit diese getrennt verwaltet und genutzt werden können. Wie registriert man also zwei B-Site-Nummern mit einer Mobiltelefonnummer? Dieser Artikel konzentriert sich auf dieses Problem und darauf, wie man das Mobiltelefon entbindet. 1. Wie registriere ich zwei B-Site-Nummern mit einer Mobiltelefonnummer? 1. Registrieren Sie ein neues Konto: Öffnen Sie zunächst die Bilibili-App auf Ihrem Mobiltelefon oder melden Sie sich auf der offiziellen Website an, klicken Sie auf die Schaltfläche „Registrieren“ und wählen Sie die Registrierungsmethode aus. Sie können Ihre Mobiltelefonnummer, E-Mail-Adresse oder einen Drittanbieter verwenden. Party-Konto (wie WeChat, QQ usw.), um sich zu registrieren. 2. Geben Sie bei der Registrierung eines Kontos bitte die erforderlichen Informationen gemäß den Systemanweisungen ein, einschließlich Mobiltelefonnummer, Bestätigungscode und festgelegtem Passwort. Achten Sie darauf, unterschiedliche Konten zu verwenden

See all articles