Heim > Artikel > Web-Frontend > Lassen Sie mich Ihnen Ereignisobjekte vorstellen. Was sind die js-Ereignisobjekte?

Lassen Sie mich Ihnen Ereignisobjekte vorstellen. Was sind die js-Ereignisobjekte?

php是最好的语言Original: 2018-07-26 12:53:371678Durchsuche

Lassen Sie uns zunächst das Ereignisobjekt vorstellen. Ereignisse existieren in Form von Objekten in Browsern, also Ereignissen. Wenn ein Ereignis ausgelöst wird, wird ein Ereignisobjekt-Ereignis generiert, das alle mit dem Ereignis verbundenen Informationen enthält. Enthält die Elemente, die das Ereignis verursacht haben, die Art des Ereignisses und andere Informationen im Zusammenhang mit dem spezifischen Ereignis. Dieser Artikel stellt hauptsächlich die relevanten Informationen zu js-Ereignisobjekten in JavaScript-Ereignissen vor. Er ist sehr gut und hat Referenzwert.

1. Ereignisobjekt

1. Das Ereignisobjekt verstehen

Ereignisse existieren in Form von Objekten in Browsern, also Ereignissen . Wenn ein Ereignis ausgelöst wird, wird ein Ereignisobjekt-Ereignis generiert, das alle mit dem Ereignis verbundenen Informationen enthält. Enthält die Elemente, die das Ereignis verursacht haben, die Art des Ereignisses und andere Informationen im Zusammenhang mit dem spezifischen Ereignis.

Zum Beispiel: Durch Mausoperationen generierte Ereignisse enthalten Informationen über die Mausposition; durch Tastaturoperationen generierte Ereignisse enthalten Informationen über die gedrückten Tasten.

Alle Browser unterstützen Ereignisobjekte, aber die Unterstützungsmethoden sind unterschiedlich. Im DOM muss das Ereignisobjekt als einziger Parameter an die Ereignisverarbeitungsfunktion übergeben werden.

2. event

<input id="btn" type="button" value="click" onclick=" console.log(&#39;html事件处理程序&#39;+event.type)"/>

im HTML-Ereignishandler erstellt eine Funktion, die die lokale Variable event enthält. Auf Ereignisobjekte kann direkt über das Ereignis zugegriffen werden.

3. Ereignisobjekte im DOM

Sowohl DOM-Level-0- als auch DOM-Level-2-Ereignishandler übergeben Ereignisse als Parameter.

<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(event){
console.log("DOM0 & click");
console.log(event.type); //click
}
btn.addEventListener("click", function (event) {
console.log("DOM2 & click");
console.log(event.type); //click
},false);
</script>
</body>

4. Ereignisobjekt im IE

Der erste Fall: Beim Hinzufügen eines Ereignishandlers über die DOM0-Ebenenmethode wird das Ereignisobjekt als verwendet Fensterobjekt Eine Eigenschaft ist vorhanden.

<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.onclick= function () {
var event=window.event;
console.log(event.type); //click
}
</script>
</body>

Der zweite Fall: Der über attachmentEvent() hinzugefügte Ereignishandler, das Ereignisobjekt wird als Parameter übergeben.

<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.attachEvent("onclick", function (type) {
console.log(event.type); //click
})
</script>
</body>

Aber es gibt zwei Dinge, die ich nicht verstehe.

1. Ein Ereignisparameter kann auch an den über die DOM-Level-0-Methode hinzugefügten Ereignishandler übergeben werden. Sein Typ ist derselbe wie window.event.type, aber der Ereignisparameter übergeben ist anders als window.event, warum?

btn.onclick= function (event) {
var event1=window.event;
console.log(&#39;event1.type=&#39;+event1.type); //event1.type=click
console.log(&#39;event.type=&#39;+event.type); //event.type=click
console.log(&#39;event1==event?&#39;+(event==event1)); //event1==event?false
}

2. Das im durch attachmentEvent hinzugefügte Ereignis übergebene Ereignis unterscheidet sich von window.event.

<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.attachEvent("onclick", function (type) {
console.log(event.type); //click
console.log("event==window.event?"+(event==window.event)); //event==window.event?false
})
</script>
</body>

Das Obige ist die vom Herausgeber vorgestellte Zusammenfassung des JavaScript-Event-Lernens (3). Ich hoffe, dass es für alle hilfreich ist Bitte achten Sie auf den Inhalt der Website von Script House!

Verwandte Empfehlungen:

Das obige ist der detaillierte Inhalt vonLassen Sie mich Ihnen Ereignisobjekte vorstellen. Was sind die js-Ereignisobjekte?. 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：Zusammenfassung häufig verwendeter Anweisungen in VueNächster Artikel：Zusammenfassung häufig verwendeter Anweisungen in Vue

In Verbindung stehende Artikel

Mehr sehen