DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理
事件对象——兼容处理
1 /* 2 * 功能: 事件对象兼容 3 * 参数: 表示常规浏览器的事件对象e 4 */ 5 function getEvent(e) { 6 // 如果存在e存在,直接返回,否则返回window.event 7 return e || window.event; 8 }
获取事件所对应的目标——兼容处理
1 /* 2 * 功能: 获取事件所对应的目标 3 * 参数: 表示常规浏览器的事件对象e 4 */ 5 function getTargetByEvent(e) { 7 // 如果存在e.target,直接返回,否则返回window.event.srcElement 8 return e.target || window.event.srcElement; 9 }
添加事件——兼容处理
1 /* 2 * 功能: 添加事件 3 * 参数: 4 */ 5 function addEventHandler(element, eventName, handler) { 6 // 三目(条件)运算符,如果存在document.addEventListener直接调用,否则调用document.attachEvent这个方法 7 document.addEventListener ? element.addEventListener(eventName, handler, flase) : element.attachEvent('on' + eventName, handler); 8 }
阻止默认事件——兼容处理
1 /* 2 * 功能: 阻止默认事件 3 * 参数: 表示要阻止的事件对象 4 */ 5 function stopDefaultEvent(e) { 6 // 三目(条件)运算符,如果存在e.preventDefault直接调用,否则使用window.event.returnValue = false; 7 e.preventDefault ? e.preventDefault() : (window.event.returnValue = false); 8 }
阻止冒泡事件——兼容处理
1 /* 2 * 功能: 阻止冒泡事件 3 * 参数: 表示要阻止的事件对象 4 */ 5 function stopBubbleEvent(e) { 6 e.stopPropagation ? e.stopPropagation() : (window.event.cancelBubble = true); 7 }
以上为一些事件对象所涉及到的兼容处理。
其实JS的兼容处理比较简单,无非就是判断浏览器是否有此方法(对象),如果有的话,就直接调用(获取),否则使用另外的方法。