Vamos resumir as coisas simples
Nota: Os seguintes métodos são envolvidos em um objeto eventutil, e o método de definição literal do objeto é usado diretamente. . .
①Add Event Method
addHandler: function (elemento, tipo, manipulador) {if (element.adDeventListener) {// detecção seja um elemento de método de nível DOM2-LEVE. } else if (element.attachevent) {// detecção se é um elemento de método de nível IE-leão.attachevent ("on" + tipo, manipulador); } else {// detecção se é um elemento de método de nível DOM0 ["on" + type] = manipulador; }}②Remove o método de evento adicionado anteriormente
RemowHandler: function (elemento, tipo, manipulador) {if (element.RemoveEventListener) {element.RemoveEventListener (tipo, manipulador, false); } else if (element.detachevent) {element.detachevent ("on" + tipo, manipulador); } else {element ["on" + type] = null; }}③ Obtenha o alvo de objetos do evento e evento
// Obtenha a compatibilidade do objeto de evento escrito em getEvent: function (event) {retorno evento? Evento: Window.Event; }, // Obtenha a compatibilidade do objetivo do objeto de eventos escrito em getTarget: function (event) {return event.target || Event.srcelement; }④Compare Writing para bloquear os eventos padrão do navegador
PreventDefault: function (event) {if (event.preventDefault) {event.preventDefault (); } else {event.returnValue = false; }}⑤Compare A escrita para impedir que os eventos borbulhassem
StopPropagation: function (event) {if (event.stopPropagation) {event.stopPropagation (); } else {event.cancelbubble = true; }}⑥O método de obter elementos relacionados apenas incluídos nos eventos de MouseOver e MouseOut
// O método para obter elementos relacionados incluídos nos eventos MouseOver e MouseOut GetRelatedTarget: function (Event) {if (event.RelatedTarget) {retornar event.RelatedTarget; } else if (event.toElement) {return event.toelement; } else if (event.FromElement) {return event.FromElement; } else {return null; }}⑦ Julgamento da roda do mouse
Para eventos de Mousedown e Mouseup, existe uma propriedade de botão em seu objeto de evento.
Indica o botão pressionado ou liberado. O atributo do botão de DOM pode ter os seguintes 3 valores: 0 representa o botão principal do mouse e 1 representa o mouse no meio.
2 indica o botão do mouse. Nas configurações convencionais, o botão principal do mouse é o botão esquerdo do mouse e o segundo mouse
O botão é o botão certo do mouse.
O IE8 e as versões anteriores também forneceram o atributo do botão, mas o valor desse atributo é muito diferente do atributo de botão do DOM.
0: significa que o botão não é pressionado.
1: indica que o botão principal do mouse foi pressionado.
2: indica que o botão do mouse foi pressionado duas vezes.
3: indica que os botões de mouse primário e secundário foram pressionados ao mesmo tempo.
4: indica que o botão do mouse do meio foi pressionado.
5: indica que o botão principal do mouse e o botão do mouse do meio foram pressionados ao mesmo tempo.
6: significa que o botão do mouse e o botão do mouse no meio foram pressionados ao mesmo tempo.
7: indica que três botões do mouse foram pressionados ao mesmo tempo.
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: retornar 0; Caso 2: Caso 6: retornar 2; Caso 4: retornar 1; }}}⑧ Método para obter o valor de incremento da roda do mouse (delta)
getwheelDelta: function (event) {if (event.weeldelta) {return (client.engine.opera && client.engine.opera <9.5? -Event.wheelDelta: event.weeldelta); } else {return -event.detail * 40; // O valor no Firefox é +3 para rolar para cima, -3 para rolar para baixo}}⑨ Aquisição da codificação de personagens de uma maneira transversal
getCharCode: function (event) {if (typeof event.charcode == "número") {return event.charcode; } else {return event.keycode; }}⑩ Acesse dados de dados na área de transferência
getClipboardText: function (event) {var clipboardData = (event.clipboardData || window.clipboarddata); return clipboarddata.getdata ("text"); }11. Defina os dados na área de transferência
setClipBoardText: function (evento, valor) {if (event.clipboardData) {return event.clipboarddata.setData ("text/plana", valor); } else if (window.clipboarddata) {return window.clipboarddata.setdata ("text", valor); }}Encapsulá -lo e você pode usá -lo diretamente.
Para arquivos completos e estilos de redefinição mais básicos de CSS e menos, consulte: https://github.com/luckywinty/resetfile
O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.