监听事件的绑定与移除主要是addEventListener和removeEventListener的运用。

addEventListener语法

element.addEventListener(type，handler，false/true)

type:事件类型

handler:事件执行触发的函数

false/true:false为冒泡/ture为捕获，参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

事件捕获：父级元素先触发，子集元素后触发；

事件冒泡：子集元素先触发，父级元素后触发；

一般的绑定事件，都是采用冒泡方式，也就是使用false

removeEventListener语法

element.removeEventListener(type，handler，false/true)

参数值含义和上述一样。

接下来用例子进一步理解监听事件的绑定与移除

例1：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <input type="button" value="test1" id="btn1">

 <input type="button" value="test2" id="btn2">

 <script>

     var btn1=document.getElementById("btn1");/*实名函数*/

     var count=0;

     var handle1=function() {

         alert(count++);

         if (count == 3) {

             alert("事件结束")

             btn1.removeEventListener("click",handle1,false);

         }

     }

     btn1.addEventListener('click',handle1,false);

     var btn2=document.getElementById("btn2");/*匿名函数*/

     btn2.addEventListener("click",function(){

         alert(123);

         removeEventListener("click",function(){

             alert(123)

         },false)

     },false)

 </script>

 </body>

 </html>

通过匿名函数是无法消除监听事件，只有通过实名函数才能。

例2：利用库来处理事件的绑定和移除会更加方便

（1）js事件的绑定与移除库

 /**

  * Created by asus on 2016/11/1.

  */

 var EventUtil={

     /*检测绑定事件*/

     addHandler:function(element,type,handler){

         if(element.addEventListener){

             element.addEventListener(type,handler,false);

         }

         else if(element.attachEvent){

             element.attachEvent('on'+type,handler);

         }

         else{

             element["on"+type]=handler /*直接赋给事件*/

         }

     },

     /*通过removeHandler*/

     removeHandler:function(element,type,handler) {   /*Chrome*/

         if (element.removeEventListener)

             element.removeEventListener(type, handler, false);

         else if (element.deattachEvent) {               /*IE*/

             element.deattachEvent('on' + type, handler);

         }

         else {

             element["on" + type] = null;

             /*直接赋给事件*/

         }

     }

 };

（2）HTML

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script src="封装监听事件.js"></script>

 </head>

 <body>

 <input type="button" value="bangding" id="btn">

 <input type="button" value="yichu" id="btn1">

     <script type="text/javascript">

         var btn=document.getElementById("btn");

         var bangding=function(){

             alert("你好！")

             }

         EventUtil.addHandler(btn,"click",bangding);

         var btn1=document.getElementById("btn1");

         var yichu=function(){

            alert("你好已被移除！");

              EventUtil.removeHandler(btn,"click",bangding)

         }

         EventUtil.addHandler(btn1,"click",yichu)

     </script>

 </body>

 </html>

这就是简单的监听事件的绑定与移除。

js监听事件的绑定与移除的更多相关文章

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

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

  2. js 多个事件的绑定及移除(包括原生写法和 jquery 写法)

    需要打开控制台查看效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  3. js监听事件 上滑消失下滑出现的效果 触摸与手势事件

    https://www.w3cmm.com/javascript/touch.html //触摸与手势事件连接tinyscrollbar //方法1var _this = $('#fabu');var ...

  4. js监听事件

    //// 监听事件 监听使用各种浏览器 // var p1 = document.getElementById("p1"); //// 监听事件 // eventUtil.addE ...

  5. JS监听事件错误：Uncaught TypeError: xx（函数名）is not a function at HTMLInputElement.onclick

    事件监听一直出错,提示已定义的函数名不是一个函数,折腾了好久才想到,原来是函数名和JS内部关键字重名造成的. 以前也遇到过这种情况,但因为发生的概率比较小,就没太在意,但是这次感觉这方面确实需要注意, ...

  6. egret之移除带参数的监听事件

    this.selectBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onClickNewIndo.bind(this,this.data) ...

  7. node.js绑定监听事件EventEmitter类

    Node.js 有多个内置的事件,我们可以通过引入 events 模块,并通过实例化 EventEmitter 类来绑定和监听事件,如下: // 引入 events 模块 var events = r ...

  8. 原 JS监听回车事件

    原 JS监听回车事件 发表于2年前(2014-06-04 10:16)   阅读(6101) | 评论(0) 11人收藏此文章, 我要收藏 赞0 1月16日厦门 OSC 源创会火热报名中,奖品多多哦  ...

  9. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

随机推荐

  1. start-stop-daemon: matching on world-writable pidfile /var/run/redis/redis-server.pid is insecurefailed

    Microsoft Store上 看到最新的Ubuntu 20.04 LTS 已经适配到WSL上了, 于是卸载了老版本 18.04 LTS,安装上了最新版本的. 第一次启动会比较慢,需耐心等待 Ins ...

  2. 虚拟化技术之kvm管理工具virsh常用基础命令（二）

    上一篇博客我们主要聊了下virsh 管理kvm虚拟机的命令相关用法和说明,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/13508231.html:今天我们来继 ...

  3. JAVA使用urlrewrite实现伪静态化

    什么是伪静态? 伪静态字面理解就是假的静态,说的官方点就是“地址重写,用户得到的全部地址都是经过处理后的URL地址”. 为什么要伪静态呢? 提高安全性,可以有效的避免一些参数名.ID等完全暴露在用户面 ...

  4. win7蓝牙连接手机蓝牙

    今天有个需求,需要win7 PC连接手机蓝牙,并发送文件到手机端.在此记录下过程. 准备: win7 电脑主机. CSR 蓝牙dongle. 手机 1. 打开蓝牙服务 方法:打开控制面板,找到“管理工 ...

  5. Fisher Coffee 测评（非严格控温控水）

    Fisher Coffee 测评(非严格控温控水) 咖啡生产批次:2020-05-29 打分区间:1~5,0.5间隔 批次:2020.6.3 酸为主,苦为主. 无甘,有甘,微甘,较甜,甘甜. 不苦,有 ...

  6. WARNING: The host 'db01' could not be looked up with /data/mysql/bin/resolveip. This probably means that your libc libraries are not 100 % compatible with this binary MySQL version......

    Linux系统安装MySQL,环境参数: 硬件配置:CPU: Xeon(R) CPU E5-2650 v4 @ 2.20GHz 8核内存:16G硬盘:系统盘200GB 数据盘1TB 操作系统CentO ...

  7. c++右值引用和转移构造函数

    int &&i = ; //i绑定到了右值1 int b = ; cout << i << endl; //输出1 i = b; cout << i ...

  8. Tmux安装和使用

    1.What's tmux tmux 是一个终端复用器: 可以激活多个终端或窗口, 在每个终端都可以单独访问,每一个终端都可以访问,运行和控制各自的程序.tmux类似于screen,可以关闭窗口将程序 ...

  9. 从《三体》到“中美科技战”，3分钟理解“网络”D丝为什么要迎娶“算力”白富美

    摘要:在多维的世界里,高维的文明对于低维文明具有碾压的优势,而网络也正在从二维走向三维!网络硬件的竞争主要是“芯片+算法”. 从三体到中美科技战,理解网络与算力深度融合助力高维度竞争 1:对抗封锁,需 ...

  10. Http请求-okhttp3基本用法

    简介 HTTP是现代应用常用的一种交换数据和媒体的网络方式,高效地使用HTTP能让资源加载更快,节省带宽.OkHttp是一个高效的HTTP客户端,它有以下默认特性: 支持HTTP/2,允许所有同一个主 ...