Maison > Article > interface Web > Explication détaillée de la définition d'événements multiplateformes JavaScript et exemples d'utilisation
Explication détaillée de la définition d'événements multiplateformes JavaScript et exemples d'utilisation
- 伊谢尔伦original
- 2017-07-22 15:43:511760parcourir
Événements multiplateformes
Que sont les événements multiplateformes ? Autrement dit, l'exécution du même événement sur différents navigateurs utilise des méthodes différentes.
Qu'est-ce qu'un objet EventUtil ? Qu'est-ce que ça fait ? C'est un conteneur qui intègre toutes les fonctions liées aux événements pour faciliter la gestion des objets événementiels. Il ne possède aucun attribut. Gère principalement l'intégration des événements DOM et IE pour les rendre aussi similaires que possible.
Jetons un coup d'œil aux propriétés et méthodes des objets entre DOM et IE à des fins de comparaison (ici, nous signalons uniquement les différentes propriétés et méthodes entre les deux). Il y a cinq points principaux :
. Attributs et méthodes DOM Attributs et méthodes IE srcobj
us Jetez un œil à une petite démo, qui peut résoudre efficacement le problème de la compatibilité multiplateforme des événements :
La méthode ci-dessus peut résoudre le problème des événements multiplateformes. Examinons ensuite les propriétés de charCode.
Définissez d'abord une nouvelle méthode pour eventUtil, formatEvent, qui accepte un paramètre, l'objet Event.
<html>
<head>
<title>eventUtil</title>
<script eventType="text/javascript">
var eventUtil = {
//监听事件
addListener: function(obj, eventType, fn) {
if (obj.addEventListener) {
obj.addEventListener(eventType, fn, false);
} else if (obj.attachEvent) {
obj.attachEvent('on' + eventType, fn);
} else {
obj['on' + eventType] = fn;
}
},
//返回event对象
getEvent: function(event) {
return event || window.event;
//return event ? event : window.event;
},
//返回目标事件对象
getTarget: function(event) {
return event.target || event.srcobj;
}，
preventDefault: function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
removeListener: function(obj, eventType, fn) {
if (obj.removeEventListener) {
obj.removeEventListener(eventType, fn, false);
} else if (obj.deattachEvent) {
obj.detachEvent(eventType, fn);
} else {
obj['on' + eventType] = null;
}
},
stopPropagation: function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};
</script>
</head>
<body>
<input eventType="button" value="click me" id="btn" />
<p>event</p>
<a>Hello word!</a>
<script eventType="text/javascript">
function addBtnListen(event)
{
var event = eventUtil.getEvent(event);
var target = eventUtil.getTarget(event);
alert("my name is kock");
alert(event.eventType);
alert(target);
eventUtil.stopPropagation(event);
}
function getBodyListen(event)
{
alert("click body");
}
function getLinkListen(event)
{
alert("prevent default event");
var event = eventUtil.getEvent(event);
eventUtil.preventDefault(event);
}
window.onload=function()
{
var btn = document.getobjById("btn");
var link = document.getobjsByTagName("a")[0];
eventUtil.addListener(btn, "click", addBtnListen);
eventUtil.addListener(document.body, "click", getBodyListen);
eventUtil.addListener(link, "click",getLinkListen);
}
</script>
</body>
</html>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!