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外观模式封装的更多相关文章

  1. js原生设计模式——9外观模式封装2(小型代码库YJ)

    <script type="text/javascript">    //小型代码库YJ封装    var YJ = {        //根据id获取元素       ...

  2. js原生设计模式——7原型模式之真正的原型模式——对象复制封装

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  3. js原生设计模式——13桥接模式(相同业务逻辑抽象化处理的职责链模式)

    桥接模式之多元化类之间的实例化调用实例 <!DOCTYPE html><html lang="en"><head>    <meta ch ...

  4. js原生设计模式——7原型模式之new+call(this)组合应用再探讨实例

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  5. js设计模式——2.外观模式

    js设计模式——2.外观模式

  6. 每天一个设计模式-2 外观模式（Facade）

    每天一个设计模式-2  外观模式(Facade) 1.生活中的示例 客户想要购买一台电脑,一般有两种方法: 1.自己DIY,客户需要知道组成电脑的所有电子器件,并且需要熟悉那些配件,对客户要求较高. ...

  7. 乐在其中设计模式(C#) - 外观模式(Facade Pattern)

    原文:乐在其中设计模式(C#) - 外观模式(Facade Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 外观模式(Facade Pattern) 作者:webabcd 介绍 ...

  8. 再起航，我的学习笔记之JavaScript设计模式11(外观模式)

    经过一段时间的学习与分享,我们对创建型设计模式已经有了一定的认识,未来的一段时间里我们将展开新的篇章,开始迈入结构性设计模式的学习. 结构性设计模式与创建型设计模式不同,结构性设计模式更偏向于关注如何 ...

  9. 北风设计模式课程---外观模式（Facade）总结

    北风设计模式课程---外观模式(Facade)总结 一.总结 一句话总结: 不仅要通过视频学,还要看别的博客里面的介绍,搜讲解,搜作用,搜实例 设计模式都是对生活的抽象,比如用户获得装备,我可以先装备 ...

随机推荐

  1. CentOS 6.5配置mysql

    启动mysql service mysqld start 给root账号设置密码 mysqladmin -u root password '

  2. inotify-java linux系统监听文件发生变化，实时通知java程序

    1 Overview     最近公司的一个任务需要实时监控文件系统中某个文件的内容变化.由于程序本身由Java编写,因此使用了inotify- java(http://code.google.com ...

  3. Allegro PCB -如何做自定义焊盘

    1.如何创建自定义焊盘,比如这种形状的焊盘. (1).打开PCB Editor –>Allegro PCB Design ->New,在类型中选择Shape symbol,并输入名字,比如 ...

  4. 关于css的伪类和伪元素

    现在才发现自己一直没有分清楚css的伪类和伪元素啊,so,总结一下. CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相 ...

  5. [iOS]关于零基础学习iOS开发的学习方法总结

    关于零基础学习iOS开发的学习方法总结 最近很多零基础来参加蓝鸥培训的学生经常会问到一些学习方法的问题,就如下我自己见过的好的学习方法一起讨论一下. 蓝鸥iOS开发技术的学习路线图 程序员的主要工作是 ...

  6. exe打包发行哪家强

    exe打包发行哪家强,我推荐Advanced Installer11.0: 该有的都有了,这是网盘地址:http://pan.baidu.com/s/1geRDPIz

  7. mongoose的virtual属性

    设置vitual属性 personSchema.virtual('name.full').get(function () { return this.name.first + ' ' + this.n ...

  8. redis对比memcached

    摘要 : 简单地比较Redis与Memcached的区别,大多数都会得到以下观点: 1  Redis不仅仅支持简单的k/v类型的数据,同时还提供list,set,hash等数据结构的存储. 2  Re ...

  9. C# 开发系列(一)

    1.开发环境搭建: win7 32位系统,然后安装 visual studio 2012. 2.将 .net_framework 加入到windows 的环境变量当中. C:\Windows\Micr ...

  10. js动画（三）

    咳咳咳咳,感冒了感冒了,鼻塞,蓝瘦啊!嘴巴也开裂,哎,心疼自己.想到这是第三只唇膏了!只怪,放荡不倔爱自由, 行驶在冷风路上么,北风那个吹啊吹啊吹啊,好了,发神经发完了,接下来进入正题,严肃脸.(字数 ...