Résumons les choses simples
Remarque: Les méthodes suivantes sont enveloppées dans un objet EventUtil et la méthode de définition littérale de l'objet est directement utilisée. . .
Méthode d'événement ①Add
AddHandler: fonction (élément, type, gestionnaire) {if (élément.addeventListener) {// détection s'il s'agit d'un élément de méthode de niveau DOM2.addeventListener (type, handler, false); } else if (element.attachevent) {// Détection s'il s'agit d'un élément de méthode de niveau ie.Attachevent ("on" + type, manageur); } else {// Détection s'il s'agit d'un élément de méthode de niveau DOM0 ["ON" + type] = Handler; }}Réfléchissez la méthode de l'événement précédemment ajouté
retireHandler: function (élément, type, gestionnaire) {if (element.reMoveEventListener) {element.reMoveEventListener (type, mannequin, false); } else if (element.detachevent) {element.detachevent ("on" + type, manageur); } else {élément ["on" + type] = null; }}③ Obtenez la cible de l'événement et de l'objet de l'événement
// Obtenez la compatibilité de l'objet d'événement écrit dans getEvent: fonction (événement) {return event? Événement: Window.Event; }, // Obtenez la compatibilité de la cible de l'objet d'événement écrit dans getTarget: function (event) {return event.target || event.srcelement; }④Cositer l'écriture pour bloquer les événements par défaut du navigateur
preuveDefault: function (event) {if (event.PreventDefault) {event.PreventDefault (); } else {event.returnvalue = false; }}⑤Carquez l'écriture pour empêcher les événements de bouillonner
stopPropagation: function (event) {if (event.stoppropagation) {event.stoppropagation (); } else {event.cancelbubble = true; }}⑥La méthode d'obtention d'éléments connexes n'est inclus dans les événements de la souris et de la souris
// La méthode pour obtenir des éléments connexes inclus dans les événements MouseOver et Mouseout getRelatedTarget: function (event) {if (event.relatedTarget) {return event.relatedTarget; } else if (event.toelement) {return event.toElement; } else if (event.fromement) {return event.fromement; } else {return null; }}⑦ Jugement de la roue de souris
Pour les événements de Mousedown et Mouseup, une propriété Button existe dans son objet d'événement.
Indique le bouton appuyé ou libéré. L'attribut de bouton de DOM peut avoir les 3 valeurs suivantes: 0 représente le bouton principal de la souris, et 1 représente la souris au milieu.
2 Indique le bouton de la souris. Dans les paramètres conventionnels, le bouton principal de la souris est le bouton gauche de la souris et la deuxième souris
Le bouton est le bouton droit de la souris.
IE8 et les versions précédentes ont également fourni l'attribut de bouton, mais la valeur de cet attribut est très différente de l'attribut de bouton du DOM.
0: signifie que le bouton n'est pas enfoncé.
1: indique que le bouton principal de la souris a été enfoncé.
2: indique que le bouton de la souris a été enfoncé deux fois.
3: indique que les boutons de souris primaire et secondaire ont été enfoncés en même temps.
4: indique que le bouton de la souris centrale a été enfoncé.
5: indique que le bouton principal de la souris et le bouton de la souris intermédiaire ont été enfoncés en même temps.
6: Cela signifie que le bouton de la souris et le bouton de la souris au milieu ont été enfoncés en même temps.
7: Indique que trois boutons de souris ont été pressés en même temps.
getButton: function (event) {if (document.implementation.hasfeature ("mouseevents", "2.0")) {return event.button; } else {switch (event.button) {cas 0: cas 1: cas 3: cas 5: cas 7: return 0; Cas 2: Cas 6: retour 2; Cas 4: retour 1; }}}⑧ Méthode pour obtenir la valeur d'incrément de la roue de la souris (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; // La valeur dans Firefox est +3 pour faire défiler, -3 pour faire défiler}}⑨ACQUISITION DE LA COMPART CODE DE CROSS-BROWNER
getCharcode: function (event) {if (typeof event.charcode == "nombre") {return event.Charcode; } else {return event.KeyCode; }}⑩ Accédez aux données dans le presse-papiers
getClipboardText: function (event) {var ClipboardData = (event.clipboardData || window.clipboardData); Return ClipboardData.getData ("texte"); }11. Définissez les données dans le presse-papiers
setClipboardText: fonction (événement, valeur) {if (event.clipboardData) {return event.clipboardData.setData ("text / plaine", valeur); } else if (window.clipboardData) {return window.clipboarddata.setData ("texte", valeur); }}L'encapsulez-le et vous pouvez ensuite l'utiliser directement.
Pour les fichiers complets et les styles de réinitialisation plus basiques de CSS et moins, voir: https://github.com/luckywinty/resetfile
Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.