zoukankan      html  css  js  c++  java
  • JS添加事件和解绑事件:addEventListener()与removeEventListener()

    作用:

         addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。

         它们都接受3个参数:事件名、事件处理的函数和布尔值。

         布尔值参数是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。

    示例:

    环境:移动端,界面禁止触摸事件

    要在body上添加事件处理程序,可以使用下列代码:

    document.body.addEventListener('touchmove', function (event) {
        event.preventDefault();
    },false);

    通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除;移除时传入的参数与添加处理程序时使用的参数相同。这也

    意味着通过addEventListener()添加的匿名函数无法移除

    错误用法示例:

    document.body.addEventListener('touchmove', function (event) {
        event.preventDefault();
    },false);
    document.body.removeEventListener('touchmove', function (event) {
        event.preventDefault();
    },false);

    这个例子中,我使用addEventListener()添加一个事件处理程序。虽然调用removeEventListener(0是看似使用了相同的参数,但实际上,第二个参数与传入addEventListener()中的那一个完全不同的函数。而传入removeEventListener()中的事件处理程序函数必须与传addEventListener()中的相同

    正确用法示例:

    function bodyScroll(event){
        event.preventDefault();
    }
    document.body.addEventListener('touchmove',bodyScroll,false);
    document.body.removeEventListener('touchmove',bodyScroll,false);

    重写后的这个例子没有问题,是因为在addEventListener()和removeEventListener()中用来相同的函数。

    共用函数不能带参数,错误用法示例:

    function bodyScroll(event){
        event.preventDefault();
    }
    document.body.addEventListener('touchmove',bodyScroll(event),false);
    document.body.removeEventListener('touchmove',bodyScroll(event),false);

    总结:

    一:相同事件绑定和解除,需要使用共用函数;

    二:共用函数不能带参数;

  • 相关阅读:
    安卓笔记:Android 界面设计指南——人人都是产品经理就是个玩笑话
    Windows CMD 命令
    安卓开发:dex 文件反编译
    VBA 学习笔记 运算符
    工商管理同等学力申硕全国统一考试资料整理
    VBA 学习笔记 判断语句、循环
    VBA 学习笔记 日期时间函数
    安卓自动领水果福气
    【合集】人大商学院同等学力工商管理
    安卓笔记:进度设计原则和常见错误
  • 原文地址:https://www.cnblogs.com/ecmasea/p/9068711.html
Copyright © 2011-2022 走看看