1、事件处理程序兼容性封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外观模式之事件处理程序浏览器兼容性封装</title>
</head>
<body>
<button id="myBtn">事件监听测试按钮</button>
</body>
<script type="text/javascript">
/***
*此示例是事件处理程序浏览器兼容性封装
*/
function addEvent(dom,type,fn){
//对于支持addEventListener()方法的浏览器是标准浏览器，可使用此方法处理事件
if(dom.addEventListener){
dom.addEventListener(type,fn,false);//false指事件是以冒泡传播方式传播
}else if(dom.attachEvent){//对于支持attachEvent()方法的浏览器是IE浏览器，可使用该方法处理IE浏览器中的事件
dom.attachEvent('on'+type,fn);
}else{//对于不支持addEventListener()和attachEvent()两个DOM2级方法的，但支持on+事件名(这种写法是DOM0级，太通用，容易被覆盖)的浏览器(都支持)，使用该写法
dom['on'+type] = fn;
}
}
//测试用例:给一个DOM元素同时绑定三个事件监听，点击一次回调函数应该是从上至下依次执行
var mybtn = document.getElementById('myBtn');//再次提醒：获取DOM元素时，一定要写在html文档的下面才能获取到DOM，否则为空null
addEvent(mybtn,'click',function(){
console.log('绑定事件监听1');
});
addEvent(myBtn,'click',function(){
console.log('绑定事件监听2');
});
addEvent(myBtn,'click',function(){
console.log('绑定事件监听3');
});
//本例已经通过验证
</script>
</html>
2、获取事件对象、获取事件触发对象以及阻止默认行为的多对象封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取事件对象、获取事件触发对象以及阻止默认行为的多对象封装</title>
<script type="text/javascript">
//获取事件对象
var getEvent = function(event){
//标准：event IE:window.event
return event || window.event;
}
//获取事件触发对象
var getTarget = function(event){
var e = getEvent(event);
//标准：e.target IE:e.srcElement
return e.target || e.srcElement;
}
//阻止默认行为
var preventDefault = function(event){
var e = getEvent(event);
if (e.preventDefault) {//标准
e.preventDefault();
} else{//IE
e.returnValue = false;
};
}
//本例已经通过验证
</script>
</head>
<body>
</body>
</html>