事件对象——兼容处理

1
2
3
4
5
6
7
8
/* 
 * 功能: 事件对象兼容
 * 参数: 表示常规浏览器的事件对象e
 */
function getEvent(e) {
    // 如果存在e存在，直接返回，否则返回window.event
    return e || window.event;
}

获取事件所对应的目标——兼容处理

1
2
3
4
5
6
7
8
/*
 * 功能: 获取事件所对应的目标
 * 参数: 表示常规浏览器的事件对象e
 */
function getTargetByEvent(e) {
    // 如果存在e.target，直接返回，否则返回window.event.srcElement
    return e.target || window.event.srcElement;
}

添加事件——兼容处理

1
2
3
4
5
6
7
8
/*
 * 功能: 添加事件
 * 参数:
 */
function addEventHandler(element, eventName, handler) {
    // 三目(条件)运算符，如果存在document.addEventListener直接调用，否则调用document.attachEvent这个方法
    document.addEventListener ? element.addEventListener(eventName, handler, flase) : element.attachEvent('on' + eventName, handler);
}

阻止默认事件——兼容处理

1
2
3
4
5
6
7
8
/*
 * 功能: 阻止默认事件
 * 参数: 表示要阻止的事件对象
 */
function stopDefaultEvent(e) {
    // 三目(条件)运算符，如果存在e.preventDefault直接调用，否则使用window.event.returnValue = false;
    e.preventDefault ? e.preventDefault() : (window.event.returnValue = false);
}

阻止冒泡事件——兼容处理

1
2
3
4
5
6
7
/*
 * 功能: 阻止冒泡事件
 * 参数: 表示要阻止的事件对象
 */
function stopBubbleEvent(e) {
    e.stopPropagation ? e.stopPropagation() : (window.event.cancelBubble = true);
}

以上为一些事件对象所涉及到的兼容处理。
其实JS的兼容处理比较简单，无非就是判断浏览器是否有此方法(对象)，如果有的话，就直接调用(获取)，否则使用另外的方法。