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

<!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. Windows 下在 Python (Anaconda) 中安装 Dlib 库

    0. 引言 介绍在 Windows  操作系统下,在 Python 的 Anaconda 集成环境中,安装 Dlib 库 : 对于不了解源码编译的,或者利用 cmake 方法失败的,可以尝试下此方法: ...

  2. 用 Python 构建一个极小的区块链

    虽然有些人认为区块链是一个早晚会出现问题的解决方案,但是毫无疑问,这个创新技术是一个计算机技术上的奇迹.那么,究竟什么是区块链呢? 区块链 以比特币(Bitcoin)或其它加密货币按时间顺序公开地记录 ...

  3. c++ Dynamic Memory (part 2)

    Don't use get to initialize or assign another smart pointer. The code that use the return from get c ...

  4. ECharts模块化使用5分钟上手

    什么是EChats? 一句话: 一个数据可视化(图表)Javascript框架,详细?移步这里,类似(推荐)的有 HighCharts,其他? 嗯,先看看吧-- 快速上手: 模块化单文件引入(推荐). ...

  5. PHPDoc 学习记录

    https://zh.wikipedia.org/wiki/PHPDoc PHPDoc 是一个 PHP 版的 Javadoc.它是一种注释 PHP 代码的正式标准.它支持通过类似 phpDocumen ...

  6. Linux学习——echo和read命令用法

    转载自http://www.runoob.com/linux/linux-comm-read.html http://www.178linux.com/76331 echo命令 本文列举了echo命令 ...

  7. psp项目计划

    日期/任务 听课 编写程序 阅读书籍 查阅资料 日总计 周一 2h 0.5h     2.5 周二     1h   1 周三     1h     周四 2h 0.5h     2.5 周五   3 ...

  8. HDU 5672 String

    题目链接: hdu:http://acm.hdu.edu.cn/showproblem.php?pid=5672 bc(中文):http://bestcoder.hdu.edu.cn/contests ...

  9. lintcode-382-三角形计数

    382-三角形计数 给定一个整数数组,在该数组中,寻找三个数,分别代表三角形三条边的长度,问,可以寻找到多少组这样的三个数来组成三角形? 样例 例如,给定数组 S = {3,4,6,7},返回 3 其 ...

  10. java沙盒入门（2)

    Java在Internet上的应用已经日渐普遍,使用在网页上的Java程序称之为applet,利用Applet的嵌入能够使原本静态的HTML富有变化,并且能够做到"声"." ...