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

<!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. Python中如何实现im2col和col2im函数（sliding类型）

    今天来说说im2col和col2im函数,这是MATLAB中两个内置函数,经常用于数字图像处理中.其中im2col函数在<MATLAB中的im2col函数>一文中已经进行了简单的介绍. 一 ...

  2. C# ArcFace 免费人脸识别 2.0 demo

    **配置过程:** 1. 到[虹软官网](https://ai.arcsoft.com.cn/index.htm?utm_source=csdn&utm_medium=referral)下载S ...

  3. mtv网站架构模式适合企业网站应用吗？

    mtv网站架构模式适合企业网站应用吗?有时候在思考这样一个问题. 从开发角度来说,本来mvc的进度慢了些,如果在数据库管理方面用sql的话,管理起来也不很方便.小企业网本来数据就不很多,也没什么太多安 ...

  4. 华为笔试——C++消重输出

    题目:消重输出 题目介绍: 输入一个正整数,给出消除重复数字以后最大的整数,注意需要考虑长整数. 例: 输入:988274320 输出:9874320 题目分析:这个结果的实现需要两个步骤:消重和排序 ...

  5. HTML5+Bootstrap 学习笔记 3

    HTML5 aria-* and role aria是指Accessible Rich Internet Application.role的作用是描述一个非标准的tag的实际作用,而aria-*的作用 ...

  6. USACO 1.3.4 Prime Cryptarithm 牛式（模拟枚举）

    Description 下面是一个乘法竖式,如果用我们给定的那n个数字来取代*,可以使式子成立的话,我们就叫这个式子牛式. * * * x * * ------- * * * * * * ------ ...

  7. Minimum Sum of Array（map迭代器）

    You are given an array a consisting of n integers a1, ..., an. In one operation, you can choose 2 el ...

  8. PSP表格记录功能

    关于王者荣耀交流协会的PSP表格记录功能,就是针对我们平时做表格时候遇到问题的简化与解决.这部分功能可以记录我们开始时间,暂停时间,结束时间,并自动计算出各个时间段的净时间.只要你开始工作时点一下开始 ...

  9. U盘安装OSX

    1.插入U盘,磁盘工具,格式化U盘为Mac OS X拓展 (日志式): 2.去网站搜索recovery disk assistant,此文件大约1.1M,直接打开使用它制作启动盘,进度条完毕就完成了. ...

  10. HDU 5646 DZY Loves Partition

    题目链接: hdu:http://acm.hdu.edu.cn/showproblem.php?pid=5646 bc:http://bestcoder.hdu.edu.cn/contests/con ...