监听事件的绑定与移除主要是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. jraft日志复制

    jraft的日志复制是指从leader往follower复制logEntry的过程. 日志复制从节点成为leader开始.在nodeImpl的becomeLeader中 private void be ...

  2. 使用Axure设计基于中继器的左侧导航菜单

    实现效果: 使用组件: 设计详解: 一.设计外层菜单 1.拖一个矩形,在属性栏中命名cd1,设置宽高为200*45,背景色#393D49,双击设置按钮名称为“默认展开”,字体大小16,字体颜色#C2C ...

  3. 手牵手，使用uni-app从零开发一款视频小程序 (系列上 准备工作篇)

    系列文章 手牵手,使用uni-app从零开发一款视频小程序 (系列上 准备工作篇) 手牵手,使用uni-app从零开发一款视频小程序 (系列下 开发实战篇) 前言 好久不见,很久没更新博客了,前段时间 ...

  4. jqgrid 自定义文本框、选择框等查询

    要实现jqgrid的自定义查询可通过表格获取查询的条件,再给jqgrid表格发送postData参数. HTML: <table id="querytable" border ...

  5. Wireshark中的Checksum: 0x90c5 [validation disabled]问题

    Wireshark中的Checksum: 0x90c5 [validation disabled]问题 废话不多说先上问题图: 这是我在做关于DNS协议PPT的时候出现的协议树第五项展开结果,可以发现 ...

  6. 牛客网数据库SQL实战解析(51-61题)

    牛客网SQL刷题地址: https://www.nowcoder.com/ta/sql?page=0 牛客网数据库SQL实战解析(01-10题): https://blog.csdn.net/u010 ...

  7. 【转】C# 利用反射根据类名创建类的实例对象

    原文地址:https://www.cnblogs.com/feiyuhuo/p/5793606.html “反射”其实就是利用程序集的元数据信息. 反射可以有很多方法,编写程序时请先导入 System ...

  8. IdentityServer4中ResourceOwnerPassword模式获取accecc_token，并使用refresh_token刷新accecc_token

    一.IS4服务端配置 1.配置Client new Client { ClientId = "xamarin", ClientSecrets = { new Secret(&quo ...

  9. OGG复制进程延迟高，优化方法二(存在索引),SQL选择不好的索引

    https://www.cnblogs.com/lvcha001/p/13469500.html 接前序,本次场景中有索引,但是OGG复制进程使用了低效率的索引?  类似SQL使用低效索引,如何让Or ...

  10. 计算Pi

    程序: package pai; import java.math.BigDecimal; public class ComplexPi { BigDecimal result; public Com ...