Resumamos las cosas simples
Nota: Los siguientes métodos están envueltos en un objeto EventUtil, y el método de definición literal de objeto se usa directamente. . .
① Método de eventos ADD
addHandler: function (element, type, handler) {if (element.addeventListener) {// detectar si es un método DOM2 Element.AdDeventListener (type, Handler, falso); } else if (element.attachevent) {// detección si es un método de nivel IE element.attachevent ("on" + type, manejador); } else {// detección si es un elemento de método de nivel dom0 ["en" + type] = handler; }}②Remove el método de evento agregado anteriormente
removeHandler: function (element, type, handler) {if (element.removeEventListener) {element.removeEventListener (type, handler, falso); } else if (element.detachevent) {element.detachevent ("on" + type, manejador); } else {elemento ["on" + type] = null; }}③ Obtenga el objetivo de objeto de evento y evento
// Obtener la compatibilidad del objeto de evento escrito en getEvent: function (event) {return Event? Evento: Window.event; }, // Obtenga la compatibilidad del objetivo del objeto de evento escrito en getTarget: function (event) {return Event.target || Event.srcelement; }④Compare Escribir para bloquear los eventos predeterminados del navegador
PreventDefault: function (event) {if (event.preventDefault) {event.preventDefault (); } else {event.returnValue = false; }}⑤Compare Escribir para evitar que los eventos burbujeen
stopPropagation: function (event) {if (event.stoppropagation) {event.stopPropagation (); } else {event.cancelBubble = true; }}⑥ El método para obtener elementos relacionados solo incluidos en los eventos de ratón y ratón
// El método para obtener elementos relacionados incluidos en los eventos de MouseOver y MouseOut getRelatedTarget: function (event) {if (event.relatedTarget) {return Event.RelatedTarget; } else if (event.toelement) {return Event.toelement; } else if (event.FromElement) {return Event.FromElement; } else {return null; }}⑦ Juicio de la rueda del mouse
Para los eventos MouseDown y Mouseup, existe una propiedad de botón en su objeto de evento.
Indica el botón presionado o lanzado. El atributo del botón de DOM puede tener los siguientes 3 valores: 0 representa el botón principal del mouse, y 1 representa el mouse en el medio.
2 indica el botón del mouse. En la configuración convencional, el botón principal del mouse es el botón del mouse izquierdo y el segundo mouse
El botón es el botón derecho del mouse.
IE8 y las versiones anteriores también proporcionaron el atributo del botón, pero el valor de este atributo es muy diferente del atributo del botón del DOM.
0: significa que el botón no está presionado.
1: indica que se ha presionado el botón principal del mouse.
2: indica que el botón del mouse se ha presionado dos veces.
3: indica que los botones del mouse primario y secundario se han presionado al mismo tiempo.
4: indica que se ha presionado el botón del mouse medio.
5: indica que el botón principal del mouse y el botón del mouse medio se han presionado al mismo tiempo.
6: Significa que el botón del mouse y el botón del mouse en el medio se han presionado al mismo tiempo.
7: Indica que se han presionado tres botones del mouse al mismo tiempo.
getButton: function (event) {if (document.implementation.hasfeature ("mouseevents", "2.0")) {return Event.Button; } else {switch (event.button) {caso 0: caso 1: caso 3: caso 5: caso 7: retorno 0; Caso 2: Caso 6: Retorno 2; Caso 4: retorno 1; }}}⑧ Método para obtener el valor de incremento de la rueda del mouse (delta)
getWheelDelta: function (event) {if (event.wheelDelta) {return (client.engine.opera && client.engine.opera <9.5? -event.wheeldelta: event.wheelDelta); } else {return -event.detail * 40; // El valor en Firefox es +3 para desplazarse hacia arriba, -3 para desplazarse hacia abajo}}⑨ Adquisición de la codificación de personajes de una manera de navegador cruzado
getCharCode: function (event) {if (typeOf Event.CharCode == "Número") {return Event.CharCode; } else {return Event.KeyCode; }}⑩ Datos de acceso en el portapapeles
getClipboardText: function (event) {var portapoardData = (event.clipboarddata || window.clipboarddata); returnpboardData.getData ("texto"); }11. Establezca los datos en el portapapeles
setClipboardText: function (event, value) {if (event.clipboarddata) {return Event.clipboardData.setData ("Text/Plain", Value); } else if (window.clipboarddata) {return window.clipboarddata.setData ("text", valor); }}Encapsularlo y luego puede usarlo directamente.
Para archivos completos y estilos de reinicio más básicos de CSS y menos, consulte: https://github.com/luckywinty/resetfile
Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.