大家好,这里是「 从零开始学 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(六)为元素绑定与解绑事件的更多相关文章

  1. 从零开始学 Web 之 DOM(二)对样式的操作,获取元素的方式

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  2. 从零开始学 Web 之 DOM(五)元素的创建

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...

  3. 从零开始学 Web 之 DOM(一)DOM的概念,对标签操作

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  4. 从零开始学 Web 之 DOM(三)innerText与innerHTML、自定义属性

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  5. 从零开始学 Web 之 DOM(四)节点

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  6. 从零开始学 Web 之 DOM(七)事件冒泡

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...

  7. jquery移除元素时会自动解绑事件

    .html() When .html() is used to set an element's content, any content that was in that element is co ...

  8. 从零开始学 Web 系列教程

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...

  9. 从零开始学 Web 之 jQuery(六)为元素绑定多个相同事件,解绑事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. 循序渐进VBA EXCEL数据操作小实例

    1 向指定单元格区域内写入数据 Sub example1() ) arr() = Array("A", "B", "C", "D& ...

  2. Blast

    NCBI 教程:https://www.ncbi.nlm.nih.gov/books/NBK279681/ 本地使用 blast 的步骤 1. 构建本地数据库索引 $makeblastdb -in h ...

  3. [Algorithm]Algorithm章1 排序算法

    1.冒泡排序-相邻交换 (1)算法描述 冒泡排序是一种简单的排序算法.它重复地走访过要排序的数列,一次比较两个元素,如果它们的顺序错误就把它们交换过来.走访数列的工作是重复地进行直到没有再需要交换,也 ...

  4. Python3实战系列之七(获取印度售后数据项目)

    问题:续接上一篇.说干咱就干呀,勤勤恳恳写程序呀! 目标:此篇开始进入正题了.为实现我们整个项目功能而开始实现各个子模块功能.首先实现第一篇列出的分步功能模块的第四步: 4.python读取excel ...

  5. wamp环境搭建(apache安装,mysql安装,php安装)

    1.软件安装说明 WAMP:Window操作系统+Apache软件+PHP解析器+MySQL软件 2.Apache执行流程 用户向服务器端发送请求àDNS解析àIP地址à端口àApache服务 Apa ...

  6. innodb_flush_method理解

    http://blog.csdn.net/gua___gua/article/details/44916207 innodb_flush_method这个参数控制着innodb数据文件及redo lo ...

  7. iOS 开发之 KVC - setValuesForKeysWithDictionary 解析

    从字典映射到一个对象,这是KVC中的一个方法所提供的,这个方法就是 setValuesForKeysWithDictionary:,非常好用,不需要你来一一的给对象赋值而直接从字典初始化即可,但用的不 ...

  8. liunx Ubuntu 设置IP、网关、DNS

    说明:在网上给的教程上面通常会有这样的一个误导思路,按照配置文件设置后会不生效的问题,甚至没有一点效果,经过排查发现Linux下设置IP这个话题的入口线索应该分为两种:1为Server版,2为Desk ...

  9. w9 Ansible批量管理与维护

    Ansible是2013年推出的一种通用自动化工具,可用于配置管理或工作流程自动化.配置管理是一种“基础架构代码”实践,它将事物编码,例如应该在系统上安装什么包和版本,或者应该运行什么守护进程.工作流 ...

  10. document.getElementById("xx").style.xxx中的 全部属性

    CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom borderBottom border-bottom-color borde ...