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外观模式封装的更多相关文章
- js原生设计模式——9外观模式封装2(小型代码库YJ)
<script type="text/javascript"> //小型代码库YJ封装 var YJ = { //根据id获取元素 ...
- js原生设计模式——7原型模式之真正的原型模式——对象复制封装
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- js原生设计模式——13桥接模式(相同业务逻辑抽象化处理的职责链模式)
桥接模式之多元化类之间的实例化调用实例 <!DOCTYPE html><html lang="en"><head> <meta ch ...
- js原生设计模式——7原型模式之new+call(this)组合应用再探讨实例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- js设计模式——2.外观模式
js设计模式——2.外观模式
- 每天一个设计模式-2 外观模式（Facade）
每天一个设计模式-2 外观模式(Facade) 1.生活中的示例 客户想要购买一台电脑,一般有两种方法: 1.自己DIY,客户需要知道组成电脑的所有电子器件,并且需要熟悉那些配件,对客户要求较高. ...
- 乐在其中设计模式(C#) - 外观模式(Facade Pattern)
原文:乐在其中设计模式(C#) - 外观模式(Facade Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 外观模式(Facade Pattern) 作者:webabcd 介绍 ...
- 再起航，我的学习笔记之JavaScript设计模式11(外观模式)
经过一段时间的学习与分享,我们对创建型设计模式已经有了一定的认识,未来的一段时间里我们将展开新的篇章,开始迈入结构性设计模式的学习. 结构性设计模式与创建型设计模式不同,结构性设计模式更偏向于关注如何 ...
- 北风设计模式课程---外观模式（Facade）总结
北风设计模式课程---外观模式(Facade)总结 一.总结 一句话总结: 不仅要通过视频学,还要看别的博客里面的介绍,搜讲解,搜作用,搜实例 设计模式都是对生活的抽象,比如用户获得装备,我可以先装备 ...
随机推荐
- 使用JAVA NIO实现的UDP client和server
//////////////////////////////////////////////////////////////////////////////////////////////////// ...
- 利用Openssl进行RSA加密签名算法
加密(签名)的过程是(M的e次方)mod n,在这里我们把消息M假定为一个数字,但实际上消息一般为字符串,所以必须有一个将字符串转化为数字的规则,并且要让这个数字的大小和n相当(也不能比 n大).这样 ...
- Android安全讲座第九层(二) 内存dump
近来android上越来越多的应用对自身的保护机制加强了重视,主要表现在几个方面. 1 dex加壳 2 so加壳 3 dex藏在so中,在适当的时候释放. 这是技术上一个进步,并且还有一些专业的公司提 ...
- 上传数据插件 Easy Populate 遇到问题 ?langer=remove
批量上传,出现如下错误提示: ADD NEW PRODUCT FAILED! – Model: no200 – SQL error. Check Easy Populate error log in ...
- Mysql 技巧
order by条件: SELECT * FROM tablename WHERE id_one=27 OR id_two=27 ORDER BY CASE WHEN id_one=27 THEN t ...
- download plugin update site for offline installation
Reference Eclipse Launcher Running update manager from command line 好多次为window下的eclipse不能拿到linux下直 ...
- javascript 数组合并
javascript 中两个数组合并,当然可以遍历其中一个数组,通过push()方法将元素插入到另一个数组中. 另外,也可以使用内置的方法(javascript Array 对象上就具有的方法,或许比 ...
- css中元素水平垂直居中4种方法介绍
table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...
- 如何把程序钉到Windows7任务栏(修正版)
源:如何把程序钉到Windows7任务栏(修正版) 在CSDN论坛看到有网友提问如何把程序钉到Windows7的任务栏,ccrun(妖哥)对这个问题很感兴趣,于是google了一下,没有找到相关的AP ...
- 注解用法详解——@SuppressWarnings
一.前言 编码时我们总会发现如下变量未被使用的警告提示: 上述代码编译通过且可以运行,但每行前面的“感叹号”就严重阻碍了我们判断该行是否设置的断点了.这时我们可以在方法前添加 @SuppressWar ...