English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
In fact, this article was written quite a while ago, but due to a bug in sf saving, I wrote a lot at that time, only to find that it hadn't been saved, and I felt it was a big regret to have left it incomplete. Today, I finally have some free time, so I'll supplement it and it will also serve as a conclusion to my JavaScript learning summary.
Here, we mainly discuss the events related to JavaScript -
Event handler
In the DOM, some events are defined, and the function that responds to an event is called an event handler (or event listener). The name of an event handler usually starts with 'on', for example: onclick, etc.
Event bubbling and capturing
Event flow refers to the order in which events are received on a page, IE, Firefox, and Chrome browsers are all event bubbling. So, event bubbling refers to the fact that events are initially received by the most specific element and then propagate upwards to less specific nodes. On the other hand, event capturing is exactly the opposite. Event capturing was proposed by Netscape, and the specific illustrations of event bubbling and capturing are as follows:
Although event capturing is the only event stream model supported by Netscape, currently IE9Both Firefox and Google Chrome also support this event stream model.
The benefits of event bubbling
We can use the principle of bubbling to add events to the parent level and trigger the execution effect because events have a bubbling mechanism. Of course, the benefit of doing so is to improve performance.
<head lang="en">
<meta charset="UTF-8">
<title></title>
div>/<script type="text
window.onload = function () {
var aUl = document.getElementsById("bubble");
var aLi = aUl.getElementsByTagName("li");
for(var i = 0;i<aLi.length;i++){
aLi[i].onmouseover = function () {
this.style.backgroundColor = "blue";
};
ali[i].onmouseout = function () {
this.style.backgroundColor = "";
window.event.cancelBubble=true
window.event.cancelBubble=true
};
}/<
}/head>
<body>
<div>
<ul id = "bubble">
<li>1}/li>
<li>2}/li>
<li>3}/li>
<li>4}/li>
}/ul>
}/0px; background:#CCC"><
}/body>
So können wir auf den Mausereignissen der li hinzufügen. Aber wenn wir viele li mit einem for-Schleif haben könnten, beeinflusst das die Leistung.
Wir können dies mit dem Event-Delegation-Verfahren umsetzen. Der HTML-Code bleibt unverändert:
div>/<script type="text
window.onload = function () {
var aUl = document.getElementsById("bubble");
var aLi = aUl.getElementsByTagName("li");
//In jedem Event, solange das Element, das Sie betreiben, der Event-Quelle ist.
// IE: window.event.srcElement
// Standard: event.target
aUl.onmouseover = function (ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "blue";
window.event.cancelBubble=true
};
aUl.onmouseout = function (ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() = "li"){
target.style.background = "";
window.event.cancelBubble=true
window.event.cancelBubble=true
};
}/<
Wie kann man die Event-Blase verhindern? Sehen Sie sich unten ein Beispiel an:
<div onclick="showMsg(this,event)" id="outSide" style="width:10<div onclick="showMsg(this,event)" id="inSide" style="width:100px; background:#000; padding:50px; background:#000; padding:
0px">10<div onclick="showMsg(this,event)" id="inSide" style="width:100px; height:/0px; background:#CCC"><
}/0px; background:#CCC"><
div>/<script type="text
//javascript">
Nach dem Verhindern des Aufblasens des Ereignisses klicken Sie auf die graue Box, der entire Prozess blendet nur ein Mal das Dialogfeld (Vergleichen Sie dies mit dem Standardfall)
function stopBubble(e)
function showMsg(obj,e)
alert(obj.id);
window.event.cancelBubble=true
//stopBubble(e)
Verhindern Sie das Aufblasen des Ereignisses Funktion
function stopBubble(e)
{
if (e && e.stopPropagation)
e.stopPropagation()
else
window.event.cancelBubble=true
}/<
script>
Klicken Sie auf das schwarze Umfassungsdiagramm:
DOM 0-Level-Ereignisbehandler
Durch js spezifizierte Ereignisbehandler werden in der Regel als Callback-Funktionen dieser Ereignisbehandler-Attribut zugewiesen. Jedes Element hat sein eigenes Ereignisbehandler-Attribut (kleine Attribute, z.B.: onclick)
btn.onclick = function(){
};
console.log('hello');
var btn = document.getElementById('myDiv');
//Verwendung der DOM 0-Level-Spezifizierung von Ereignisbehandlern wird als Methode des Elements betrachtet. Daher weist this auf das aktuelle Element hin:
btn.onclick = function (event) {
DOM aufgerufene Ereignisse erzeugen ein Ereignisobjekt event//alert(this.id);
};
sich auf die Modellierung von HTML- und XML-Dokumenten konzentriert. Es enthält Funktionen zur Navigation und Verarbeitung von Dokumenten. 1
sich auf die Modellierung von HTML- und XML-Dokumenten konzentriert. Es enthält Funktionen zur Navigation und Verarbeitung von Dokumenten. 1 myDiv
sich auf die Modellierung von HTML- und XML-Dokumenten konzentriert. Es enthält Funktionen zur Navigation und Verarbeitung von Dokumenten. 1 DOM level 1998 im 10 Monat 1 Jahr3C-Standardvorschlag. Am
Die zweite Version des Arbeitsentwurfs wurde 2000 Jahr 9 Monat 29 Tag.
Es ist erwähnenswert, dass DOM level 0 nicht W3C-Spezifikation. Es ist jedoch nur eine Anpassung an Netscape Navigator 3.0 und IE 3.0 einer Definition der äquivalenten Funktionalität.
DOM 2Event-Handler
DOM 2definiert zwei Methoden, um die Operationen zur Festlegung und Löschung von Event-Handlern auszuführen: addEventListener() und removeEventListener(), sie akzeptieren alle drei Parameter:
1.Event-Name. Zum Beispiel der obige click
2.Funktion als Event-Handler.
3.Boolesche-Werte (true bedeutet, dass der Event-Handler im Kapturen-Phase aufgerufen wird, false bedeutet, dass die Blase-Phase)
Durch die Methode addEventListener des Element-Objekts kann auch ein Ereignis-Callback definiert werden.
//element.addEventListener(event, function, useCapture)
var btn = document.getElementById('myDiv');
btn.addEventListener('click', function () {
console.log(this.id);
}, false);
Ereignisbehandler in IE
IE9frühere IE-Browser unterstützen addEventListener() und removeEventListener() nicht.
Im Gegensatz zu anderen Browsern verwendet IE die Methoden attachEvent() und detachEvent() zur Hinzufügung von Ereignisbehandlern in das DOM, da IE8und frühere Versionen unterstützen nur das Ereignisblubbern, daher akzeptieren sie nur zwei Parameter:
1、Ereignisbehandlungsname (davor muss on stehen)
2、Ereignisbehandlungsfunction
Die durch attachEvent() hinzugefügten Ereignisbehandlungen sind wie folgt:
var btn = document.getElementById('myDiv');
btn.attachEvent('onclick', function () {
console.log(this.id);
});
Es ist zu beachten, dass bei der Verwendung von attachEvent() die Ereignisbehandlungen im globalen Bereich ausgeführt werden, daher ist this gleich window
Ereignisobjekt
Wenn ein Ereignis auf einem DOM ausgelöst wird, wird ein Ereignisobjekt event erstellt, das alle mit dem Ereignis verbundenen Informationen enthält. Dazu gehören das Element, das das Ereignis verursacht hat, der Ereignistyp sowie andere Informationen, die mit dem spezifischen Ereignis verbunden sind. Das Ereignisobjekt wird als erster Parameter an die Callback-Funktion des Ereignisbeobachters übergeben. Wir können über das Ereignisobjekt viele Informationen über das aktuelle Ereignis erhalten:
type (String) — Der Name des Ereignisses
target (node) — Der DOM-Knoten, von dem das Ereignis ausgeht
currentTarget?；(node) — Der aktuelle DOM-Knoten, auf dem die Callback-Funktion ausgelöst wird (dies wird später ausführlich erläutert)
bubbles (boolean) — Zeigt an, ob dieses Ereignis ein Blasenereignis ist (dies wird später erläutert)
preventDefault(function) — Diese Methode verhindert, dass der Benutzeragent des Browsers das Standardverhalten des aktuellen Ereignisses auslöst. Zum Beispiel verhindert sie das Laden einer neuen Seite durch das Klicken auf ein <a>-Element.
Cancelable (boolean) — Diese Variable zeigt an, ob das Standardverhalten dieses Ereignisses durch Aufruf von event.preventDefault verhindert werden kann.
stopPropagation (function) — 取消事件的进一步捕获或冒泡，bubbles为true使用这个方法
stopPropagation (function) — Verhindert die weitere Kapturen oder Blase des Ereignisses, verwenden Sie diesen Methoden, wenn bubbles auf true gesetzt ist.1eventPhase：Gibt eine Zahl zurück, die den aktuellen Ereignisstadium anzeigt, 0 bedeutet, dass das Ereignis von der Oberfläche des DOM zum Zielknoten propagiert wird,2Für die Kapturenphase,3Für das Ereignis, das den Zielknoten erreicht hat,
Für die Blasephase.
Darüber hinaus kann der Ereignisobjekt viele andere Eigenschaften haben, die jedoch spezifisch für das bestimmte Ereignis sind. Zum Beispiel enthalten Mausereignisse die Eigenschaften clientX und clientY, um die Position der Maus im aktuellen Fenster anzuzeigen.
var btn = document.getElementById('myDiv');
btn.onclick = function (event) {
alert("clicked");
event.stopPropagation();
};
//Vermeiden Sie das Auslösen des Ereignisbehandlers auf document.body
document.body.onclick = function (event) {
alert("Body clicked");
};
Der event-Objekt existiert nur während der Ausführung des Ereignisbehandlers, wird automatisch zerstört, sobald der Ereignisbehandler abgeschlossen ist.
Ereignisobjekt im IE
Bei der Hinzufügung von Ereignisbehandlern im DOM-Level 0 existiert der event-Objekt als Eigenschaft des window-Objekts:
var btn = document.getElementById('myDiv');
btn.onclick = function (event) {
var event = window.event;
alert(event.type);//click
};
Der event-Objekt des IE enthält ebenfalls Eigenschaften und Methoden, die mit dem erstellten Ereignis zusammenhängen.
cancleBubble Boolesch Der Standardwert ist false, kann jedoch auf true gesetzt werden, um die Ereignisblase zu beenden, identisch mit der Methode stopPropagation() im DOM.
returnValue Boolesch Der Standardwert ist true, wird auf false gesetzt, um das Standardverhalten des Ereignisses abzubrechen, identisch mit preventDefault() im DOM.
srcElement Element Das Ziel des Ereignisses, identisch mit dem target-Attribut im DOM.
type Zeichenkette Der ausgelöste Ereignistyp.
click-Ereignis
Nachdem der Benutzer geklickt hat, enthält der event-Objekt die folgenden Eigenschaften.
pageX, pageY: Die Koordinaten des Klickorts im Verhältnis zum html-Element, in Einheiten von Pixel.
clientX, clientY: Die Koordinaten des Klickorts im Verhältnis zum Viewport (viewport), in Einheiten von Pixel.
screenX, screenY: Die Koordinaten des Klickorts im Verhältnis zum Anzeigescreen des Geräts, in Einheiten der Hardware-Pixel des Geräts
clientX, clientY
Abbildung: clientX und clientY, ihre Werte stellen die horizontalen und vertikalen Koordinaten des Mauszeigers im Ansichtsfenster zur Zeit des Ereignisses dar (ohne den Bereich des Rollbalkens)
Abstand
Durch folgende4Eine Eigenschaft, die den Abstand des Elements ermitteln kann.
（1）offsetHeight: Die Fläche in Pixeln, die das Element in der vertikalen Richtung einnimmt. Dies beinhaltet die Höhe des Elements, die Höhe des sichtbaren horizontalen Rollbalkens, die Höhe der oberen und unteren Ränder.
（2）offsetWidth: Die Fläche in Pixeln, die das Element in der horizontalen Richtung einnimmt. Dies beinhaltet die Breite des Elements, die Breite des sichtbaren vertikalen Rollbalkens, die Breite der linken und rechten Ränder.
（3）offsetLeft: Der Abstand in Pixeln vom linken Rand des Elements zum linken Rand des umschließenden Elements.
（4）offsetTop: Der Abstand in Pixeln vom oberen Rand des Elements zum oberen Rand des umschließenden Elements.
pageX, pageY
Diese beiden Eigenschaften stellen die Position des Mauszeigers in der Seite dar, bei nicht gerollter Seite sind die Werte von pageX, pageY mit den Werten von clientX, clientY gleich.
Rollengröße
Rollengröße, das bedeutet die Größe des Elements, das den rollbaren Inhalt enthält.
Hier ist4Eine mit der Größenveränderung der Rollen verknüpfte Eigenschaft.
（1）scrollHeight: Ohne den Rollbalken, die Gesamthöhe des Inhalts des Elements.
（2）scrollWidth: Ohne den Rollbalken, die Gesamtbreite des Inhalts des Elements.
（3）scrollLeft: Die Anzahl der Pixel, die im linken Inhaltsbereich versteckt sind. Durch die Einstellung dieser Eigenschaft kann die Scrollposition des Elements geändert werden.
（4）scrollTop: Die Anzahl der Pixel, die im Inhaltsbereich versteckt sind. Durch die Einstellung dieser Eigenschaft kann der Scrollposition des Elements geändert werden.
Fokusereignisse
Fokusereignisse werden ausgelöst, wenn ein Seitenlement den Fokus erhält oder verliert, es gibt folgende4Eine Fokusereignisse:
1.blur: Wird ausgelöst, wenn ein Element den Fokus verliert, dieses Ereignis bläst nicht
2.focus: Wird ausgelöst, wenn ein Element den Fokus erhält. Keine Blase
3.focusin: Wird ausgelöst, wenn ein Element den Fokus erhält, Blasen
4.focusout: Wird ausgelöst, wenn ein Element den Fokus verliert, Blasen
Mausereignisse
DOM 3Ebenen definieren9Eine Mausereignisse:
click: Wird ausgelöst, wenn der Benutzer die Haupttaste der Maus (normalerweise die linke Maustaste oder die Eingabetaste) klickt.
dbclick: Wird ausgelöst, wenn der Benutzer die Maus doppelt klickt.
mousedown: Wenn der Benutzer eine beliebige Taste der Maus drückt, wird dieses Ereignis ausgelöst, dieses Ereignis kann nicht durch die Tastatur ausgelöst werden.
mousemove: Wird wiederholt ausgelöst, wenn die Maus um ein Element bewegt wird, dieses Ereignis kann nicht durch Mausereignisse ausgelöst werden.
mouseout: Wird ausgelöst, wenn die Maus das Element verlässt, dieses Ereignis kann nicht durch die Tastatur ausgelöst werden.
mouseover: Wird ausgelöst, wenn die Maus in das Element eindringt, dieses Ereignis kann nicht durch die Tastatur ausgelöst werden.
mouseenter: Ähnlich wie 'mouseover', aber nicht bläht und wird nicht ausgelöst, wenn der Cursor auf einem Nachkommenselement positioniert ist.
mouseleave: Ähnlich wie 'mouseout', aber nicht bläht. Wird nicht ausgelöst, wenn sich der Cursor über dem Element befindet.
mouseup: Wird ausgelöst, wenn der Benutzer die Maustaste loslässt, kann nicht durch die Tastatur ausgelöst werden.
Das Ereignisobjekt, das an den Mausereignis-Handler übergeben wird, hat die Eigenschaften clientX und clientY, die die Position des Mauszeigers im Verhältnis zum umschließenden Fenster angeben. Fügen Sie den Verschiebungsabstand des Fensters hinzu, um die Mausposition in Dokumentkoordinaten umzuwandeln.
Alle Elemente auf der Seite unterstützen Mausereignisse. Mit Ausnahme von mouseenter und mouseleave blähen alle Ereignisse auf und ihr Standardverhalten kann abgebrochen werden. Das Abbrechen des Standardverhaltens von Mausereignissen kann jedoch andere Ereignisse beeinflussen, da einige Mausereignisse miteinander abhängig sind.
Drag-Ereignisse
（1）drag-Ereignis
Das drag-Ereignis wird während des Ziehens des Quellobjekts ausgelöst.
（2）dragstart, dragend-Ereignis
Das dragstart-Ereignis wird ausgelöst, wenn der Benutzer mit der Maus ein Objekt zieht, und das dragend-Ereignis wird ausgelöst, wenn das Ziehen beendet wird.
（3）dragenter, dragleave-Ereignis
Das dragenter-Ereignis wird ausgelöst, wenn das Quellobjekt in das Zielobjekt gezogen wird, und das dragleave-Ereignis wird ausgelöst, wenn das Quellobjekt das Zielobjekt verlässt.
（4）dragover-Ereignis
Das dragover-Ereignis wird ausgelöst, wenn das Quellobjekt über einem anderen Objekt gezogen wird, auf dem letzteren.
（5）drop-Ereignis
Wenn das Quellobjekt auf das Zielobjekt gezogen wird und der Benutzer die Maus loslässt, wird das drop-Ereignis auf dem Zielobjekt ausgelöst.
Das ist der Inhalt dieses Artikels. Ich hoffe, es hilft Ihnen bei Ihrem Lernen und ich wünsche mir, dass Sie unsere Unterstützung und Unterstützung für das Lernhandbuch schreien.