需要打开控制台查看效果：

<!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 写法)的更多相关文章

  1. js监听事件的绑定与移除

    监听事件的绑定与移除主要是addEventListener和removeEventListener的运用. addEventListener语法 element.addEventListener(ty ...

  2. js事件的绑定与移除

    事件的绑定分为3类: <div id='clickEvent'>点击事件</div> 在DOM元素中直接绑定 <div onclick="alert('4567 ...

  3. JavaScript之事件的绑定与移除

    对于事件的绑定的方法有多种多样,但是在解除绑定事件的时候,就要注意使用的是那种绑定事件的方法,因为不同的绑定方法所对应的解除事件是不同的. 1. 原始写法 1.1 绑定事件:对象.事件=事件处理函数 ...

  4. 通过原生js对DOM事件的绑定的几种方式总汇

    在网页开发中经常会有交互操作,比如点击一个dom元素,需要让js对该操作做出相应的响应,这就需要对Dom元素进行事件绑定来进行处理,js通常有三种常用的方法进行事件绑定:在DOM元素中直接绑定:在Ja ...

  5. js 监听事件的叠加和移除

    html DOM元素有很多on开头的监听事件,如onload.onclick等,见DOM事件列表.但是同一种事件,后面注册的会覆盖前面的: window.onresize = function(){ ...

  6. JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置

    日常的网页开发调试工作中,经常需要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置,下面介绍三种用来跟踪页面中的事件的方法. 1.使用firefox调试 我们可以使用firefox的debug工 ...

  7. js的事件循环绑定和jQuery的隐式迭代

    js的事件循环绑定和jQuery的隐式迭代 js事件循环绑定 jQuery隐式迭代 先举一个例子:给定一个ul,点击列表内的每一个li元素,使它的背景色变红,下边分别用js代码和jQuery实现. & ...

  8. JS中的事件(对象，冒泡，委托，绑定)

    - 事件,是文档或浏览器窗口中发生的一些特定的交互瞬间,JS与HTML之间的交互是通过事件实现的 对于web应用来说,有下面这些代表性事件:点击事件,鼠标移动,按下键盘等等 - 事件,是用户和浏览器之 ...

  9. 关于js中对事件绑定与普通事件的理解

    普通事件指的是可以用来注册的事件: 事件绑定是指把事件注册到具体的元素之上. 通俗点说: 普通事件:给html元素添加一个特定的属性(如:onclick): 事件绑定:js代码中通过标记(id  ta ...

随机推荐

  1. OpenLDAP备份和恢复

    OpenLDAP中数据备份一般分为二种: 1)通过slapcat 指令进行备份 2)通过phpLDAPadmin控制台进行备份 备份方式1: 1)slapcat -v -l openldap-back ...

  2. shell基础 -- 基本正则表达式

    正则表达式(Regular Expression,通常简称为 regex 或 RE)是一种表达方式,可以用它来查找匹配特定准则的文本.在许多编程语言中都有用到正则表达式,常用它来实现一些复杂的匹配.这 ...

  3. centos7.2下解决用Mysql 使用navicate远程连接数据库出现1045 access denied for user 'root'@'localhost' using password yes

    在mysql命令行中执行 SET PASSWORD FOR 'root'@'localhost' = PASSWORD('123456');  GRANT ALL PRIVILEGES ON *.*  ...

  4. python3【基础】-文件操作

    1. python对文件操作流程: 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件操作 关闭文件 现有如下文件: 昨夜寒蛩不住鸣. 惊回千里梦,已三更. 起来独自绕阶行. 人悄悄,帘外月胧明. ...

  5. 关于《数据结构》课本KMP算法的理解

    数据结构课上讲的KMP算法和我在ACM中学习的KMP算法是有区别的,这里我对课本上的KMP算法给出我的一些想法. 原理和之前的KMP是一样的https://www.cnblogs.com/wkfvaw ...

  6. OrderSys---Spring 计划（第一天）

    Sprint 计划会议: 目标: 1.了解需求分析书的内容 2.划分OrderSys的功能模块 3.开始制作原型 Sprint 3 Backlog细化: ID Name Est How to demo ...

  7. 在原有的基础之上，启用NAT模型

    # 给虚拟主机实例添加一个网关 route add default gw 192.168.23.1   # 在宿主机打开网卡间转发功能 echo 1 > /proc/sys/net/ipv4/i ...

  8. p2 入门

    心里一片空白,要弄个p2的demo出来... 先了解下p2的概念吧 P2只是一个算法库,以刚体为对象模型,模拟并输出物理碰撞.运动结果.这个过程通过持续调用world中的step()方法来实现 p2的 ...

  9. 【UNIX环境高级编程】线程同步

    当多个线程共享相同的内存时,需要确保每个线程看到一致的数据视图.如果每个线程使用的变量都是其他线程不会读取和修改的,那么就不存在一致性问题.同样,如果变量是只读的也不会有一致性问题.但是,当一个线程可 ...

  10. WPF中Image控件的Source属性的设置

    1.直接关联到文件,关联后不能删除此图片,因为图片正在使用. imageEditImage.Source = new BitmapImage(new Uri(strImagePath, UriKind ...