js 多个事件的绑定及移除(包括原生写法和 jquery 写法)
需要打开控制台查看效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 多个事件的绑定及移除</title>
</head>
<body> <button id="button">button</button>
<button id="unbind">unbind</button> <script>
window.onload = function() {
var button = document.querySelector('#button');
var unbind = document.querySelector('#unbind'); // 1、使用匿名函数添加事件
// 这种绑定没有办法移除, 除非移除全部 click 事件
button.addEventListener('click', function(e) {
console.log('click');
}); // 2、使用命名函数添加事件
// 这种绑定方法可以通过函数引用作为参数移除
button.addEventListener('click', click1);
unbind.addEventListener('click', function(e) {
button.removeEventListener('click', click1);
});
}; function click1(e) {
console.log('click1')
}
</script>
</body>
</html>
点击 button 再点击 unbind，再点击 button，会在控制台看到如下输出：
也可以在 jsfiddle 查看：https://jsfiddle.net/rubys/xm0pa64n/14/
使用 jquery 的话，操作比较方便：
绑定：
$('xx').on('click.click_event', function() {});
取消绑定：
$('xx').unbind('click.click_event')
和我们平常写的区别是多了个 点号和点号后面事件的标识名。
如果用 jquery，我们上面原生写法可换成
// 以下是 jquery 绑定以及取消绑定事件的用法
$(function() {
// 绑定一个 click 事件
$('#button1').on('click', function(e) {
console.log('jquery button click');
}); // 绑定另外一个 click 事件(如果我们后面需要取消绑定的话，需要指定一个标识，这里是 test)
$('#button1').on('click.test', function(e) {
console.log('jquery button click 1');
}); // 取消绑定 'test' click 事件
$('#unbind1').click(function(e) {
console.warn('jquery unbind');
$('#button1').unbind('click.test');
})
})
js 多个事件的绑定及移除(包括原生写法和 jquery 写法)的更多相关文章
- js监听事件的绑定与移除
监听事件的绑定与移除主要是addEventListener和removeEventListener的运用. addEventListener语法 element.addEventListener(ty ...
- js事件的绑定与移除
事件的绑定分为3类: <div id='clickEvent'>点击事件</div> 在DOM元素中直接绑定 <div onclick="alert('4567 ...
- JavaScript之事件的绑定与移除
对于事件的绑定的方法有多种多样,但是在解除绑定事件的时候,就要注意使用的是那种绑定事件的方法,因为不同的绑定方法所对应的解除事件是不同的. 1. 原始写法 1.1 绑定事件:对象.事件=事件处理函数 ...
- 通过原生js对DOM事件的绑定的几种方式总汇
在网页开发中经常会有交互操作,比如点击一个dom元素,需要让js对该操作做出相应的响应,这就需要对Dom元素进行事件绑定来进行处理,js通常有三种常用的方法进行事件绑定:在DOM元素中直接绑定:在Ja ...
- js 监听事件的叠加和移除
html DOM元素有很多on开头的监听事件,如onload.onclick等,见DOM事件列表.但是同一种事件,后面注册的会覆盖前面的: window.onresize = function(){ ...
- JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置
日常的网页开发调试工作中,经常需要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置,下面介绍三种用来跟踪页面中的事件的方法. 1.使用firefox调试 我们可以使用firefox的debug工 ...
- js的事件循环绑定和jQuery的隐式迭代
js的事件循环绑定和jQuery的隐式迭代 js事件循环绑定 jQuery隐式迭代 先举一个例子:给定一个ul,点击列表内的每一个li元素,使它的背景色变红,下边分别用js代码和jQuery实现. & ...
- JS中的事件(对象，冒泡，委托，绑定)
- 事件,是文档或浏览器窗口中发生的一些特定的交互瞬间,JS与HTML之间的交互是通过事件实现的 对于web应用来说,有下面这些代表性事件:点击事件,鼠标移动,按下键盘等等 - 事件,是用户和浏览器之 ...
- 关于js中对事件绑定与普通事件的理解
普通事件指的是可以用来注册的事件: 事件绑定是指把事件注册到具体的元素之上. 通俗点说: 普通事件:给html元素添加一个特定的属性(如:onclick): 事件绑定:js代码中通过标记(id ta ...
随机推荐
- JPA error org.hibernate.AnnotationException: No identifier specified for entity
错误:org.hibernate.AnnotationException: No identifier specified for entity 原因:JPA所使用的Entity需要标注@Id,在引用 ...
- 微软职位内部推荐-Senior Software Lead-Index Gen
微软近期Open的职位: Position: Senior Software Development Lead Bing Index Generation team is hiring! As one ...
- 扩展Lucas定理 扩展Lucas板子
题意概述:多组询问,给出N,K,M,要求回答C(N,K)%M,1<=N<=10^18,1<=K<=N,2<=M<=10^6 分析: 模数不为质数只能用扩展Lucas ...
- 5月5号周二课堂练习：简评cnblogs.com的用户体验
一.用户类型 在博客园上写博客,提问题,浏览感兴趣的博客帖子的活跃用户. 二.对cnblogs的期望 在博客园上写博客更流畅,制作手机版的APP可以随时随地在线浏览大牛们写的博客,提出的问题能更好的更 ...
- Linux系统中增加swap空间大小
在我的树莓派pi3上编译dlib库时,发现由于内存不足导致编译失败.树莓派是1G内存,swap只有50M,因此将swap增加到500M,编译通过.具体设置方法如下: 使用free命令带上m参数,查看s ...
- 【第一周】第一周工作统计（psp）
项目:词频统计 项目类型:个人项目 项目完成情况:已完成 项目改进:未变更 项目日期:2016.9.3-2016.9.4 3号 类别c 内容c 开始时间s 结束e 中断I 净时间T 项目实践 构思 ...
- PAT 甲级 1077 Kuchiguse
https://pintia.cn/problem-sets/994805342720868352/problems/994805390896644096 The Japanese language ...
- ADO之command
connection command对象使用的数据库连接 commandText 执行的SQL语句 ExecuteNonQuery 执行不返回行的语句,如UPDATE等 Execu ...
- Java容器深入浅出之数组
写在前面 关于Java的学习,特别是对于非计算机专业的同学来说,我总是主张从实践中来,到实践中去的学习方法.Java本身是一门应用性特别强的高级编程语言,因此如果能在基于实际开发的经验基础上,对Jav ...
- Java知识点整理（三）
如何设计出高可用的分布式架构 分布式架构 CDN简介 分布式缓存和本地缓存区别 高并发场景常用技术解决方案 JVM优化示例 Docker和JVM区别 Java开发人员需要注意的五大Docker误区 D ...