从零开始学 Web 之 DOM（六）为元素绑定与解绑事件
大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......
+------------------------------------------------------------
github：https://github.com/Daotin/Web
微信公众号：Web前端之巅
博客园：http://www.cnblogs.com/lvonve/
CSDN：https://blog.csdn.net/lvonve/
+-----------------------------------------------------------
在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！
一、为元素绑定多个事件
前导：如果一个按钮绑定了多个点击事件，那么点击按钮的时候只会执行最后一个点击事件，前面的点击事件都被覆盖了。那么如何为一个按钮绑定多个相同的事件，并且每个事件都会执行呢？
1、为元素绑定多个事件
<body>
<input type="button" value="按钮1" id="btn1">
<input type="button" value="按钮2" id="btn2">
<!-- <div id="dv"></div> -->
<script src="common.js"></script>
<script>
// 参数有3个
// 参数1：事件的类型（事件的名字），不要on
// 参数2：事件处理函数（命名函数或者匿名函数）
// 参数3：false
// 兼容性：chrome，firefox支持，IE8不支持
my$("btn1").addEventListener("click", function() {
alert("1");
},false)
my$("btn1").addEventListener("click", function() {
alert("2");
},false)
my$("btn1").addEventListener("click", function() {
alert("3");
},false)
// 参数有2个
// 参数1：事件的类型（事件的名字），要on
// 参数2：事件处理函数（命名函数或者匿名函数）
// 兼容性：chrome，firefox不支持，IE8支持
my$("btn2").attachEvent("onclick", function() {
alert("4");
});
my$("btn2").attachEvent("onclick", function() {
alert("5");
});
my$("btn2").attachEvent("onclick", function() {
alert("6");
});
</script>
</body>
绑定事件的方式：
addEventListener: chrome，firefox支持，IE8不支持
attachEvent: chrome，firefox不支持，IE8支持
2、绑定事件兼容代码
<body>
<input type="button" value="按钮" id="btn">
<script src="common.js"></script>
<script>
// 为任意元素添加任意事件
function addAnyEventListener(element, type, func) {
if(element.addEventListener) {
element.addEventListener(type, func, false);
} else if(element.attachEvent) {
element.attachEvent("on"+type, func);
} else {
element["on"+type] = func;
}
}
addAnyEventListener(my$("btn"), "click", function() {
console.log("事件1");
});
addAnyEventListener(my$("btn"), "click", function() {
console.log("事件2");
});
addAnyEventListener(my$("btn"), "click", function() {
console.log("事件3");
});
</script>
</body>
my("dv").onclick == my$("dv")["onclick"]
3、绑定事件的区别
方法名不同；
参数个数不同，addEventListener有三个参数，attachEvent有两个参数；
addEventListener中事件的类型没有 on，attachEvent中事件的类型有on；
chrome,firefox 支持 addEventListener ，IE8不支持；
chrome,firefox 不支持 attachEvent ，IE8支持；
事件中的 this 不同，addEventListener 中的 this 是当前绑定的对象；
attachEvent 中的 this 是 window。
二、为元素解绑事件
1、三种方式
1.1、方式一
如果使用 元素.onclick = function(){}; 的方式绑定对象的话，解绑的方式为 元素.onclick = null;
1.2、方式二
如果使用 元素.addEventListener("click", f1, false); 的方式绑定对象的话，解绑方式为 元素.removeEventListener("click", f1, false);
注意：这里面不能使用匿名函数，因为需要同一个事件处理函数，而两个匿名函数是两个不同的函数，所以需要使用命名函数。
1.3、方式三
如果使用 元素.attachEvent("onclick", f1); 的方式绑定对象的话，解绑方式为 元素.detachEvent("onclick", f1);
2、解绑事件兼容代码
// 为任意元素绑定任意事件
function addAnyEventListener(element, type, func) {
if(element.addEventListener) {
element.addEventListener(type, func, false);
} else if(element.attachEvent) {
element.attachEvent("on"+type, func);
} else {
element["on"+type] = func;
}
}
// 为任意元素解绑任意事件
function removeAnyEventListener(element, type, funcName) {
if(element.removeEventListener) {
element.removeEventListener(type, funcName, false);
} else if(element.detachEvent) {
element.detachEvent("on"+type, funcName);
} else {
element["on"+type] = null;
}
}
示例：
<body>
<input type="button" value="按钮" id="btn1">
<input type="button" value="按钮" id="btn2">
<script src="common.js"></script>
<script>
function f1() {
console.log("第一个");
}
function f2() {
console.log("第二个");
}
addAnyEventListener(my$("btn1"), "click", f1);
addAnyEventListener(my$("btn1"), "click", f2);
my$("btn2").onclick = function () {
removeAnyEventListener(my$("btn1"), "click", f1);
}
</script>
</body>
从零开始学 Web 之 DOM（六）为元素绑定与解绑事件的更多相关文章
- 从零开始学 Web 之 DOM（二）对样式的操作，获取元素的方式
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 DOM（五）元素的创建
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...
- 从零开始学 Web 之 DOM（一）DOM的概念，对标签操作
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 DOM（三）innerText与innerHTML、自定义属性
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 DOM（四）节点
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 DOM（七）事件冒泡
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...
- jquery移除元素时会自动解绑事件
.html() When .html() is used to set an element's content, any content that was in that element is co ...
- 从零开始学 Web 系列教程
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...
- 从零开始学 Web 之 jQuery（六）为元素绑定多个相同事件，解绑事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
随机推荐
- Heartbleed心脏出血漏洞原理分析
Heartbleed心脏出血漏洞原理分析 2017年01月14日 18:14:25 阅读数:2718 1. 概述 OpenSSL在实现TLS和DTLS的心跳处理逻辑时,存在编码缺陷.OpenSS ...
- leveldb 学习记录(三) MemTable 与 Immutable Memtable
前文: leveldb 学习记录(一) skiplist leveldb 学习记录(二) Slice 存储格式: leveldb数据在内存中以 Memtable存储(核心结构是skiplist 已介绍 ...
- 【project】【Maven】dynamic web module 3.1 requires 1.7
Maven导入和新建java web 项目时可能报的错. 解决方案: 1.保证 在eclipse 构建 web中关于java版本有三处需要修改统一: 右击项目,选择“propertie”===> ...
- com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You have an error in your SQL syntax;问题的解决
哇,时隔两天时间,终于找到这个问题的解决办法,先看问题 这是我最近写的家庭记账本网页版,按顺序输入点击保存,总是弹出添加失败的提示 顺着找原因,把原因锁定在dao层的sql语句上,反复检查,没有找到一 ...
- lombok(@Getter&@Setter)
Lombok是一个可以通过简单的注解形式来帮助我们简化消除一些必须有但显得很臃肿的Java代码的工具,通过使用对应的注解,可以在编译源码的时候生成对应的方法. 官方地址:https://project ...
- IText实现对PDF文档属性的基本设置
一.Itext简介 iText是著名的开放源码的站点sourceforge一个项目,是用于生成PDF文档的一个java类库.通过iText不仅可以生成PDF或rtf的文档,而且可以将XML.Html文 ...
- 安装zookeeper（单机，伪集群）
1.登陆zookeeper官网下载 https://zookeeper.apache.org/ zookeeper-3.4.8.tar.gz 解压:tar -zxvf zookeeper-3.4.8. ...
- Android -Services 使用简介
Android Services 四大组件之一,主要用于后台长时间运行.没有界面.这里讲解两种services的启动还有AIDL通信方式. 1.startservices a.建立继承services ...
- golang注意问题
关于slice 我们都知道slice是在通过参数传递的时候传递的是引用 slice的appen操作是有返回值的,并不改变原值 例如 b := [],,,} c:=append(b, ) // b 不变 ...
- 自适应Simpson法与积分初步
前言 不知道为什么,今天感觉想要写一下数学的东西,然后就看了一下我还有这个模板不会,顺手写了一下. 没有学过微积分的最好还是看一下求导为好. 求导 听说很多人都不会求导,我写一下吧qwq 令\(f(x ...