js原生设计模式——9外观模式封装

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>

秒客网

js原生设计模式——9外观模式封装

相关文章