监听事件的绑定与移除主要是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. 年轻的樵夫哟，你掉的是这个免费 8 核 4G 公网服务器，还是这个随时可用的 Docker 实验平台？

    小孩子才做选择,成年人全都要.那么我们现在就来看看如何获得一台免费的 8 核 4G 公网 Docker 实验平台服务器. Play With Docker 直接打开 https://labs.play ...

  2. Ubuntu操作系统（文件传输）

    首先选择Ubuntu版本为偶数版本--(系统比较稳定软件源比较齐全) Ubuntu和windows之间的文件传输首先在Windows上安装连接工具winscp 在Ubuntu开启SSH服务(https ...

  3. JavaScript设计模式之单例模式【惰性单例】

    在提高开发水平,往中高级前端工程师中,利用设计模式是必不可少的一条道路.掌握设计模式的思想远远比硬套重要,因为设计模式是一种思想,不局限于开发语言.但实际上由于语言的特性不同,往往在实现的时候会有不少 ...

  4. 企业微信人员日程推送接口（python版）

    企业在使用企业微信中,有时想批量推送员工日程信息.这里写了个接口工具分享给大家,供交流学习. 主入口程序: # -*- coding: utf-8 -*-import time as time imp ...

  5. Python3技巧：动态变量名

    Firstly 各位应该做过服务器运维吧,像这样: 那么,在服务器运维的程序中,最好的访问服务器的方式是:运维库名.服务器名 由于服务器名是动态的,所以变量名也是动态的.今天我们就来讲讲Python3 ...

  6. AWS 学习笔记之 VPC

    原文:https://ericfu.me/aws-notes-vpc/ VPC 把 VPC 想象成一个逻辑上的数据中心 包含一个 IGW (Internet Gateway)或者 Virtual Pr ...

  7. 0基础算法基础学算法 第八弹 递归进阶，dfs第一讲

    最近很有一段时间没有更新了,主要是因为我要去参加一个重要的考试----小升初!作为一个武汉的兢兢业业的小学生当然要去试一试我们那里最好的几个学校的考试了,总之因为很多的原因放了好久的鸽子,不过从今天开 ...

  8. Java数据结构——根据遍历结果构造二叉树

    一.已知前序.中序.后序遍历结果的其中两种,还原二叉树. ①已知前序遍历结果:1,2,4,5,3,6,7 中序遍历结果:4,2,5,1,6,3,7还原二叉树后BFS出结果. TreeNode.java ...

  9. Swift Expressible literal

    Swift Expressible Literal 引子 从一个面试题说起.有如下代码: struct Book { let name: String } let book: Book = " ...

  10. 跨站请求伪造(csrf)的防护手段

    CSRF CSRF全拼为Cross Site Request Forgery,译为跨站请求伪造. CSRF指攻击者盗用了你的身份,以你的名义发送恶意请求. 造成的问题:个人隐私泄露以及财产安全. CS ...