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 ...
随机推荐
- 该用哪个：Redis与Memcached之间如何选择呢？
华为云分布式缓存Redis5.0和Memcached都是华为云DCS的核心产品. 那么在不同的使用场景之下,如何选择Redis5.0和Memcached呢? 就由小编为大家进行详细的数据对比分析吧 R ...
- linux ——使用find如何快速替换所有相同参数
在生成环境上有时候需要大规模修改某一配置里的参数,但是该参数存在多个地方,比如IP地址 端口 项目名等,特别是项目名称混乱想统一 find /项目地址 -type f |xargs grep &qu ...
- USACO 1.2.2 Transformations 方块转换
Description 一块N x N(1<=N<=10)正方形的黑白瓦片的图案要被转换成新的正方形图案.写一个程序来找出将原始图案按照以下列转换方法转换成新图案的最小方式: 1:转90度 ...
- Windows上安装、配置MySQL的常见问题
一,MySQL的下载安装 MySQL的安装过程就不说了,基本上和一般软件的安装过程没什么两样,就是一路点next,设置的root用户的密码要牢记.具体教程可以参考:http://jingyan.bai ...
- Linux系统中增加swap空间大小
在我的树莓派pi3上编译dlib库时,发现由于内存不足导致编译失败.树莓派是1G内存,swap只有50M,因此将swap增加到500M,编译通过.具体设置方法如下: 使用free命令带上m参数,查看s ...
- PHP中普通方法和静态方法
普通方法(实例方法) 一个类中定义的方法,可以为这个类的所有对象调用的方法.也可以理解为,这个类的所有对象,都各自有自己的一个该方法: 定义形式: class 类名{ function 方法名(形 ...
- ETL技术( Extract-Transform-Load) 数据仓库技术-比如kettle
每次面试,互联网的面试官,经常问我有没有用过ETL,每次我都懵逼,说没用过,觉得是多么高大上的东东,数据仓储 今天查了一下,我晕,自己天天用的Kettle就是最典型的ETL, 可以实现不同数据库之间的 ...
- Vue使用，异步获取日期时间后格式成"/Date(1333245600000+0800)/" 转换成正常格式
js从后台mvc中日期获取,结果格式成"/Date(1333245600000+0800)/"了,当然不能这样展显给用户了,要转换,方法如下: function data_stri ...
- MVC4中control的增删改查
public class TestController : Controller { private LeaveEntities db = new LeaveEntities(); // // GET ...
- js中关于array的常用方法
最近总结了一些关于array中的常用方法, 其中大部分的方法来自于<JavaScript框架设计>这本书, 如果有更好的方法,或者有关于string的别的常用的方法,希望大家不吝赐教. 第 ...