目录
注册事件的兼容性问题 addEventListener
// 处理注册事件的兼容性问题
// eventName, 不带on, click mouseover mouseout
function addEventListener(element, eventName, fn) {
// 判断当前浏览器是否支持addEventListener 方法
if (element.addEventListener) {
element.addEventListener(eventName, fn); // 第三个参数 默认是false
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, fn);
} else {
// 相当于 element.onclick = fn;
element['on' + eventName] = fn;
}
}
事件处理对象的兼容性
var btn = document.getElementById('btn');
btn.onclick = function (e) {
// DOM标准中,是给事件处理函数一个参数
// e就是事件对象
// 在老版本的IE中获取事件对象的方式 window.event
// 处理事件对象的浏览器兼容性
e = e || window.event;
// 事件的阶段:1 捕获阶段 2 目标阶段 3 冒泡阶段 了解
// console.log(e.eventPhase);
// e.target 获取真正触发事件的对象 浏览器兼容问题
// 在老版本的IE中 使用 srcElement
// 处理兼容性问题
var target = e.target || e.srcElement;
console.log(e.target);
// e.currentTarget 事件处理函数所属的对象this
console.log(e.currentTarget);
}
处理移除事件的兼容性处理
function removeEventListener(element, eventName, fn) {
if (element.removeEventListener) {
element.removeEventListener(eventName, fn);
} else if (element.detachEvent) {
element.detachEvent('on' + eventName, fn);
} else {
element['on' + eventName] = null;
}
}
获取页面滚动距离的浏览器兼容性问题
e.pageX/e.pageY 鼠标在页面中的位置 有兼容性问题 从IE9以后才支持
// 获取页面滚动距离的浏览器兼容性问题
// 获取页面滚动出去的距离
function getScroll() {
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
return {
scrollLeft: scrollLeft,
scrollTop: scrollTop
}
}
获取鼠标在页面的位置,处理浏览器兼容性
// 获取鼠标在页面的位置,处理浏览器兼容性
function getPage(e) {
var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
var pageY = e.pageY || e.clientY + getScroll().scrollTop;
return {
pageX: pageX,
pageY: pageY
}
}