Fassen wir die einfachen Dinge zusammen
HINWEIS: Die folgenden Methoden werden in ein EventUtil -Objekt eingewickelt, und die Objektliteraldefinitionsmethode wird direkt verwendet. . .
①ADD -Ereignismethode
AddHandler: Funktion (Element, Typ, Handler) {if (element.adDeVentListener) {// Erkennung, ob es sich um ein DOM2-Level-Methodenelement.adDeVentListener (Typ, Handler, False) handelt; } else if (element.attachEvent) {// Erkennung, ob es sich um ein IE-Level-Methodenelement.attachEvent ("on" + type, Handler); } else {// Erkennung, ob es sich um ein DOM0-Methodenelement ["on" + type handelt] = Handler; }}②Remove die zuvor hinzugefügte Ereignismethode
removeHandler: Funktion (Element, Typ, Handler) {if (element.removeEventListener) {element.removeventListener (Typ, Handler, Falsch); } else if (element.detACHEvent) {element.detACHEvent ("on" + type, Handler); } else {element ["on" + type] = null; }}③ Erhalten Sie das Ereignis- und Ereignisobjektziel
// Erhalten Sie die Kompatibilität des Ereignisobjekts in getEvent: function (Ereignis) {Rückgabeereignis? Ereignis: window.event; }, // Erhalten Sie die Kompatibilität des Ereignisobjektziels in GetTarget: Funktion (Ereignis) {return event.target || event.srcelement; }④Compare -Schreiben, um die Standard -Ereignisse des Browsers zu blockieren
PreventDefault: function (Ereignis) {if (event.preventDefault) {Event.PreventDefault (); } else {event.returnValue = false; }}⑤Compare -Schreiben, um zu verhindern, dass Ereignisse sprudelten
StopPropagation: Funktion (Ereignis) {if (Ereignis.StopPropagation) {Event.StopPropagation (); } else {event.cancelBubble = true; }}⑥Die Methode, verwandte Elemente zu erhalten, die nur in Mausover- und Mausout -Ereignissen enthalten sind
// Die Methode, um verwandte Elemente in den Mausover- und Mouseout -Ereignissen enthalten zu erhalten, Get -bezogeneTarget: Funktion (Ereignis) {if (event.relatedTarget) {return event.relatedTarget; } else if (event.toELement) {return event.toelement; } else if (event.fromelement) {return event.fromelement; } else {return null; }}⑦ Mausradurteil
Für MouseDown- und MouseUp -Ereignisse gibt es in ihrem Ereignisobjekt eine Button -Eigenschaft.
Zeigt die gedrückte oder freigegebene Taste an. Das Taste -Attribut von DOM kann die folgenden 3 Werte haben: 0 repräsentiert die Hauptmaustaste und 1 repräsentiert die Maus in der Mitte.
2 zeigt die Maustaste an. In den herkömmlichen Einstellungen ist die Hauptmaustaste die linke Maustaste und die zweite Maus
Die Taste ist die rechte Maustaste.
IE8 und frühere Versionen lieferten auch das Schaltflächenattribut, aber der Wert dieses Attributs unterscheidet sich stark vom Schaltflächenattribut des DOM.
0: bedeutet, dass die Taste nicht gedrückt wird.
1: Gibt an, dass die Hauptmaustaste gedrückt wurde.
2: Zeigt an, dass die Maustaste zweimal gedrückt wurde.
3: Zeigt an, dass gleichzeitig die primären und sekundären Maustasten gedrückt wurden.
4: Zeigt an, dass die mittlere Maustaste gedrückt wurde.
5: Zeigt an, dass die Hauptmaustaste und die mittlere Maustaste gleichzeitig gedrückt wurden.
6: Dies bedeutet, dass die Maustaste und die Maustaste in der Mitte gleichzeitig gedrückt wurden.
7: Zeigt an, dass gleichzeitig drei Maustasten gedrückt wurden.
getButton: function (event) {if (document.implementation.hasfeature ("mouseevents", "2.0") {return event.button; } else {Switch (Ereignis.button) {Fall 0: Fall 1: Fall 3: Fall 5: Fall 7: Rückgabe 0; Fall 2: Fall 6: Rückgabe 2; Fall 4: Rückgabe 1; }}}⑧ Methode, um den Inkrementwert des Mausrads (Delta) zu erhalten
GetWheelDelta: Funktion (Ereignis) {if (event.Wheeldelta) {return (client.engine.opera && client.engine.opera <9.5? } else {return -event.detail * 40; // Der Wert in Firefox beträgt +3, um nach oben zu scrollen, -3, um nach unten zu scrollen}}⑨ Akquisition von Charaktercodierung auf Kreuzbrowser-Weise
getCharCode: function (event) {if (typeof event.charCode == "number") {return event.charcode; } else {return event.keycode; }}⑩ Zugriff auf Daten in der Zwischenablage zugreifen
getClipboardText: function (event) {var clipboardData = (Event.clipboardData || window.clipboardData); return clipboardData.getData ("Text"); }11. Stellen Sie die Daten in die Zwischenablage ein
setClipboardText: function (event, value) {if (event.clipboardData) {return event.clipboardData.setData ("text/plain", value); } else if (window.clipboardData) {return window.clipboardData.setData ("Text", Wert); }}Kapitulieren Sie es und dann können Sie es direkt verwenden.
Für vollständige Dateien und weitere grundlegende Reset -Stile von CSS und weniger finden Sie unter: https://github.com/luckywinty/resetfile
Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.