Maison > Article > interface Web > Événements multi-navigateurs en JavaScript (tutoriel graphique)
Tout d'abord, il convient de mentionner qu'il existe des problèmes de compatibilité du navigateur avec des méthodes ou des objets tels que le traitement des événements, les objets d'événement et l'empêchement de la propagation des événements. Au cours du processus de développement, il est préférable d'écrire un traitement d'événements universel. Eh bien, examinons ensuite les méthodes de base des opérations d'événements entre navigateurs en JavaScript
Lier les événements
EU.addHandler = function(element,type,handler){ //DOM2级事件处理,IE9也支持 if(element.addEventListener){ element.addEventListener(type,handler,false); } else if(element.attachEvent){ //type加'on' //IE9也可以这样绑定 element.attachEvent('on' + type,handler); } //DOM0级事件处理步,事件流也是冒泡 else{ element['on' + type] = handler; } };
Dissocier les événements. Fondamentalement identique au traitement des événements de liaison, il y a une remarque :
Le gestionnaire transmis doit être le même que celui transmis lors de la liaison de l'événement (pointant vers la même fonction)
EU.removeHandler = function(element,type,handler){ if(element.removeEventListener){ element.removeEventListener(type,handler); } else if(element.attachEvent){ element.detachEvent('on' + type,handler); } else{ //属性置空就可以 element['on' + type] = null; } };
Événement d'ajout de navigateur
function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(type,fn,false); }else if(obj.attachEvent){//IE obj.attchEvent('on'+type,fn); } }
Événement de suppression multi-navigateur
function removeEvent(obj,type,fn){ if(obj.removeEventListener){ obj.removeEventListener(type,fn,false); }else if(obj.detachEvent){//兼容IE obj.detachEvent('on'+type,fn); } }
Comportement par défaut du blocage multi-navigateur
function preDef(ev){ var e = ev || window.event; if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue =false; } }
Obtenez l'objet cible dans tous les navigateurs
function getTarget(ev){ if(ev.target){//w3c return ev.target; }else if(window.event.srcElement){//IE return window.event.srcElement; } }
Obtenez la position de la barre de défilement dans tous les navigateurs
//跨浏览器获取滚动条位置,sp == scroll position function getSP(){ return{ top: document.documentElement.scrollTop || document.body.scrollTop, left : document.documentElement.scrollLeft || document.body.scrollLeft; } }
Obtenez la taille de la fenêtre visuelle dans tous les navigateurs
function getWindow () { if(typeof window.innerWidth !='undefined') { return{ width : window.innerWidth, height : window.innerHeight } } else{ return { width : document.documentElement.clientWidth, height : document.documentElement.clientHeight } } },
Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.
Articles associés :
Analyse détaillée et réponses au principe de fonctionnement de JavaScript
À propos d'Eclipse pour supprimer js (JavaScript ) erreurs de vérification (réponse détaillée)
Conseils JavaScript de base (tutoriels image et texte, réponses détaillées pour vous)
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!