浅析JavaScript中浏览器的兼容问题(2)

5、注册事件
.addEventListener = function (type,listener,useCapture ) { };
//第一个参数 事件名称
//第二个参数 事件处理函数（监听者）
//第三个参数 true捕获 false冒泡
//IE9以后才支持
// 兼容旧环境

var EventTools = { addEventListener: function (element, eventName, listener) { //能力检测 if(element.addEventListener) { element.addEventListener(eventName, listener,false); }else if(element.attachEvent) { element.attachEvent("on" + eventName, listener); }else{ element["on" + eventName] = listener; } }, // 想要移除事件，不能使用匿名函数 removeEventListener: function (element, eventName, listener) { if(element.removeEventListener) { element.removeEventListener(eventName,listener,false); }else if(element.detachEvent) { //IE8以前注册.attachEvent和移除事件.detachEvent element.detachEvent("on"+eventName,listener); }else{ element["on" + eventName] = null; } } };

6、事件对象
 1)事件参数e，就是事件对象，标准的获取方式
btn.onclick = function(e) { }
 2)e.eventPhase 事件阶段，IE8以前不支持
 3)e.target 始终是触发事件的对象（点击的按钮）
        i）IE8以前 srcElement
        ii）浏览器兼容
var target = e.target || window.event.srcElement;

// 获取事件对象 兼容浏览器 getEvent: function(e) { return e || window.event; // e事件对象 标准的获取方式； window.event IE8以前获取事件对象的方式 } // 兼容target getTarget: function(e) { return e.target || e.srcElement; }

7、获取鼠标在页面上的位置
①在可视区域中的位置：  e.clientX   e.clientY
②在文档中的位置：
        i） e.pageX      e.pageY
        ii）浏览器兼容

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var pageY = e.clientY + scrollTop;

8、获取页面滚动的距离

// 兼容浏览器 var scrollTop = document.documentElement.scrollTop || document.body.scrolltop;

9、取消文本的选择

// 兼容浏览器 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

【总结】这里只是做了一部分的小结，实际开发中也还会遇到各种浏览器兼容的问题。不同浏览器在PC端和手机端也会遇到不同适配问题，这些就有待童鞋们一起去发掘总结啦~~希望能帮到大家，不足的地方请多指教啦~~~

以上这篇浅析JavaScript中浏览器的兼容问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章: