文档章节

事件练习:封装兼容性添加、删除事件的函数(实录 四)

own1991
 own1991
发布于 2017/07/11 18:52
字数 233
阅读 14
收藏 0

http://www.fgm.cc/learn/lesson4/08.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>事件练习:封装兼容性添加、删除事件的函数</title>
    <style>
  
    
    span {
        color: #999;
    }
    </style>
    
</head>

<body>
    <div id="container">
        <button id="useless-btn">毫无用处的按钮</button>
        <button id="add-btn">绑定click事件</button>
        <button id="remove-btn">解除绑定</button>
    </div>
    <script type="text/javascript">
        var uselessBtn = document.getElementById('useless-btn');
        var addBtn = document.getElementById('add-btn');
        var removeBtn = document.getElementById('remove-btn');

        var EventUtil = {
            addHandler: function (element, eventType, handler) {
                if (element.addEventListener) {
                    element.addEventListener(eventType, handler, false);
                } else if (element.attachEvent) { // IE<=8
                    element.attachEvent('on' + eventType, handler);
                } else { // DOM0
                    element['on' + eventType] = handler;
                }
            },

            removeHandler: function (element, eventType, handler) {
                if (element.removeEventListener) {
                    element.removeEventListener(eventType, handler, false);
                } else if (element.detachEvent) { // IE<=8
                    element.detachEvent('on' + eventType, handler);
                } else { // DOM0
                    element['on' + eventType] = null;
                }
            }
        };

        function show() {
            alert('事件绑定成功');
        };

        EventUtil.addHandler(addBtn, 'click', function () {
            EventUtil.addHandler(uselessBtn, 'click', show);
            uselessBtn.innerHTML = '我可以点击了';
        });

        EventUtil.addHandler(removeBtn, 'click', function () {
            EventUtil.removeHandler(uselessBtn, 'click', show);
            uselessBtn.innerHTML = '毫无用处的按钮';
        });
    </script>
</body>

</html>

© 著作权归作者所有

own1991
粉丝 0
博文 61
码字总数 29561
作品 0
黄浦
私信 提问
前端学习(四)--jQuery

一、入门 1、jquery 就是一个js的框架; 2、好处就是能让我们的js代码写的更少; 3、基本使用:引入script,后面使用即可; 4、关于版本选择:1.* 版本的兼容性比较好,大公司用的多; 5、关...

stanwuc
2018/11/29
0
0
前端学习(三)javascript(*)

三、DOM应用 1、dom基础 (1)dom 节点: 父节点的获取:parentNode、offsetParent(获取有定位的父节点); 子节点的获取:childNodes和nodeType(也可以用children); 首尾子节点:first...

stanwuc
2018/12/12
0
0
JavaScript事件机制详细研究

本篇开始将回顾下Javascript的事件机制。同时会从一个最小的函数开始写到最后一个具有完整功能的,强大的事件模块。为叙述方便将响应函数/回调函数/事件Listener/事件handler都称为事件handl...

yandxxx
2012/10/25
171
0
Object of Event-Professional JavaScript for Web Developer

在Nicholas C.Zakas'《Professional JavaScript for Web Developer》一书中,对于解决event对象兼容性问题进行了归纳封装。 优点:无需过多考虑不同浏览器对event对象的差异,统一采用DOM标准...

gssify
2018/08/27
0
0
[ZooKeeper]基于Java API 实践

前提 建立maven项目中 要导入zookeeper的依赖 我们同时可以打开linux中的zookeeper客户端来验证对比。输入 zkCli.sh 便可以进入zookeeper客户端 。 一、建立连接 直接建立连接后,不进行等待...

瑾兰
2018/06/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

分布式协调服务zookeeper

ps.本文为《从Paxos到Zookeeper 分布式一致性原理与实践》笔记之一 ZooKeeper ZooKeeper曾是Apache Hadoop的一个子项目,是一个典型的分布式数据一致性的解决方案,分布式应用程序可以基于它...

ls_cherish
今天
4
0
redis 学习2

网站 启动 服务端 启动redis 服务端 在redis 安装目录下 src 里面 ./redis-server & 可以指定 配置文件或者端口 客户端 在 redis 的安装目录里面的 src 里面 ./redis-cli 可以指定 指定 连接...

之渊
昨天
2
0
Spring boot 静态资源访问

0. 两个配置 spring.mvc.static-path-patternspring.resources.static-locations 1. application中需要先行的两个配置项 1.1 spring.mvc.static-path-pattern 这个配置项是告诉springboo......

moon888
昨天
4
0
hash slot(虚拟桶)

在分布式集群中,如何保证相同请求落到相同的机器上,并且后面的集群机器可以尽可能的均分请求,并且当扩容或down机的情况下能对原有集群影响最小。 round robin算法:是把数据mod后直接映射...

李朝强
昨天
4
0
Kafka 原理和实战

本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/bV8AhqAjQp4a_iXRfobkCQ 作者简介:郑志彬,毕业于华南理工大学计算机科学与技术(双语班)。先后从事过电子商务、开放平...

vivo互联网技术
昨天
24
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部