监听事件的绑定与移除主要是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. Caused by: java.lang.IllegalArgumentException: Mapped Statements collection does not contain value for

    Caused by: java.lang.IllegalArgumentException: Mapped Statements collection does not contain value f ...

  2. Spark从入门到放弃---RDD

    什么是Spark? 关于Spark具体的定义,大家可以去阅读官网或者百度关于Spark的词条,在此不再赘述.从一个野生程序猿的角度去理解,作为大数据时代的一个准王者,Spark是一款主流的高性能分布式 ...

  3. three.js UV映射简述

    今天郭先生来说一说uv映射,什么是uv映射?uv映射就是将二维的贴图映射到对象的一个面(或者多个面)上.说到这个问题,我们就不得不了解一下Geometry的点.面和uv的结构.我们以BoxGeomet ...

  4. Java并发--final关键字

    一.final使用场景 final可以稀释变量,方法和类,用于便是修饰的内容一旦赋值之后不会再被改变,比如string类就是一个final类型的类. 二.final修饰变量 在Java中变量可以分为成 ...

  5. 第4章 DDL数据定义

    第4章 DDL数据定义 4.1 创建数据库 1)创建一个数据库,数据库在HDFS上的默认存储路径是/user/hive/warehouse/*.db. hive (default)> creat ...

  6. win PHP7安装oracle扩展

    环境介绍:win10.phpstudy php7.2版本 一.设置php.ini php.ini中开启相关扩展:extension=php_oci8_12c.dll.extension=php_pdo ...

  7. HYSBZ-1045 糖果传递

    有n个小朋友坐成一圈,每人有ai个糖果.每人只能给左右两人传递糖果.每人每次传递一个糖果代价为1. 假设当所有人获得均等的糖果的时候: 每个人手上的糖果的数量为\(ave\) 第\(i\)个人初始时的 ...

  8. A neural reinforcement learning model for tasks with unknown time delays

    郑重声明:原文参见标题,如有侵权,请联系作者,将会撤销发布! Abstract 我们提出了一个基于生物学的神经模型,能够在复杂的任务中执行强化学习.该模型的独特之处在于,它能够在一个动作.状态转换和奖 ...

  9. 牛客网PAT练兵场-部分A+B

    题解:简单循环 题目地址:https://www.nowcoder.com/questionTerminal/fb581ea099a14f5d97c6149cbeee249f /** * *作者:Yc ...

  10. SpringSecurity权限管理系统实战—九、数据权限的配置

    目录 SpringSecurity权限管理系统实战-一.项目简介和开发环境准备 SpringSecurity权限管理系统实战-二.日志.接口文档等实现 SpringSecurity权限管理系统实战-三 ...