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>
最新文章
- Vagrant基础简要记录
- 可视化工具gephi源码探秘(二)---导入netbeans
- Mac OS 配置PHP + mysql 环境
- Vue入门演示
- zepto源码--几个判断函数--学习笔记
- 20145207 《Java程序设计》第二周学习总结
- Java theory and practice
- printf的一个常用技巧
- sql 无法识别的配置节 system.serviceModel
- C# MessageBox 用法大全(转)
- Google jsAPI托管你的js库
- JS 继承(类式 与 原型式)
- awk,sed文本处理案例
- Java并发之需要了解但不能太依赖的东东
- 移植python笔记
- android使用百度地图最新sdk5.0后后代码混淆时,地图无法显示闪退问题
- 可持久化 trie 的简单入门
- vmware vcsa-6.5 网络架构之虚拟机的标准交换机
- 【慕课网实战】Spark Streaming实时流处理项目实战笔记十五之铭文升级版
- 4-log4j2之切分日志文件
热门文章
- CABasicAnimation 基础
- backtrack种子
- 转:lr_eval_string,lr_save_string 和 sprintf 的使用
- s15day14 ssh秘钥远程连接
- IMapControl3 Interface(1) Properties属性
- Git 常用命令汇总
- Java中的构造方法
- Android MulticastSocket IP组播
- With PHP frameworks, why is the “route” concept used?
- 利用JavaAPI访问HDFS的文件