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 ...
随机推荐
- 【转】: 塞尔达组在GDC2017演讲的文字翻译：创新的勇气
大家好,我是藤林秀麿,以导演的身份参与<荒野之息>的制作,感谢大家的出席.我曾经作为设计者和导演制作了诸多塞尔达游戏(大地与时空之章.缩小帽.四支剑.幻影沙漏.天空之剑),回首望去,我已经 ...
- 【坚持】Selenium+Python学习之从读懂代码开始 DAY2
2018/05/10 [来源:菜鸟教程](http://www.runoob.com/python3/python3-examples.html) #No.1 # 二次方程式 ax**2 + bx + ...
- java 数据存储
简单的记录一下而已. 1.寄存器: 特点:快,存储有限. 存储地点:处理器内部. 2.堆栈 特点:仅次于寄存器快,通过堆栈指针在处理器获取支持.堆栈指针下移,分配内存,上移,释放内存.此外须知生命周期 ...
- Python中import的as语法
在Python中,如果import的语句比较长,导致后续引用不方便,可以使用as语法,比如: import dir1.dir2.mod # 那么,后续对mod的引用,都必须是dir1.dir2.mod ...
- Alpha发布——视频博客
1.视频链接 视频上传至优酷自频道,地址链接:https://v.youku.com/v_show/id_XMzg5MzQ4MzM2MA==.html?spm=a2h0k.11417342.sores ...
- 欢迎来怼--第三十次Scrum会议
一.小组信息 队名:欢迎来怼 小组成员 队长:田继平 成员:李圆圆,葛美义,王伟东,姜珊,邵朔,阚博文 小组照片 二.开会信息 时间:2017/11/18 17:20~17:53,总计33min. 地 ...
- PSP DAILY的NABCD分析
1) N (Need 需求) PSP Daily 解决了用户(软件工程课上学生)记录例行报告.写每周PSP表格和统计的需求.潜在用户还有未来该课堂的学生和需要用PSP方法记录任务完成时间和统计的学习者 ...
- 图论---POJ 3660 floyd 算法(模板题)
是一道floyd变形的题目.题目让确定有几个人的位置是确定的,如果一个点有x个点能到达此点,从该点出发能到达y个点,若x+y=n-1,则该点的位置是确定的.用floyd算发出每两个点之间的距离,最后统 ...
- C++ Primer Plus学习：第一章
C++入门第一章:预备知识 C++简介 C++融合了三种不同的编程方式: C语言代表的过程性语言. C++在C语言基础上添加的类代表的面向对象语言. C++模板支持的泛型编程. C++简史 20世纪7 ...
- 2nd 词频统计效能测试
词频统计效能测试 使用性能分析工具分析结果如下 :