zoukankan      html  css  js  c++  java
  • [ javascript ( 添加 | 移除 )事件绑定 ] javascript动态给元素添加、移除事件及需要注意的问题

    最近项目中要要到 js动态给给元素绑定事件,刚好之前没用到过这些,顺便学习一下,于是google了一下 事件,
    写了如下两个事件 一个添加事件 ,一个是移除事件
    addEventListener(),removeEventListener()用于处理指定和删除事件处理程序的操作
    作用域:事件处理程序会在其所属元素的作用域内运行
    addEventListener(event,function,capturebubble);removeEventListener(event,function,capturebubble)
    参数event如上表所示, function是要执行的函数, capture与bubble分别是W3C制定得两种时间模式,
    简单来说capture就是从document的开始读到最后一行, 再执行事件, 而bubble则是先寻找指定的位置再执行事件.
    capturebubble的参数是布尔值, True表示用capture, False则是bubble

    function addEvent() {

    var obj = document.getElementById("txtIataCity");

    if (window.addEventListener) {
     
    /**
    其它浏览器的事件代码: Mozilla, Netscape, Firefox
    添加的事件的顺序即执行顺序 注意用 addEventListener 添加带on的事件,不用加on
    */

    obj.addEventListener('focus', function(){test('aa')} , false);
    } else {

    /**
    IE 的事件代码 在原先事件上添加 add 方法
    */

    obj.attachEvent('onfocus', function(){test('aa')});

    }
    }

    function removeEvnent() {

    var obj = document.getElementById("txtIataCity");

    if (window.removeEventListener) {

    obj.removeEventListener('focus', function(){test('aa')}, false);

    }

    else {

    obj.detachEvent('onfocus', function(){test('aa')});

    }
    }

     

    页面加载的时候调用上述方法给input绑定事件,测试添加成功,可是移除始终不成功。于是网上找参考资料
    通过addEventListener()添加的事件只能通过removeEventListener()来移除. 是这样做的啊 下面还有一句:
    移除时addEventListener()添加的匿名函数将无法移除
    问题找到了 function(){test('aa')}无效,因为传入addEventListener()和removeEventListener()的方法不是同一个方法
    于是将test('aa') 提出来 写成function test(msg){ alert(msg)}
    改写成:
    function addEvent() {

    var obj = document.getElementById("txtIataCity");

    if (window.addEventListener) {

    /**
    其它浏览器的事件代码: Mozilla, Netscape, Firefox
    添加的事件的顺序即执行顺序 注意用 addEventListener 添加带on的事件,不用加on
    */

    obj.addEventListener('focus', test('msg')} , false);

    }

    else {

    /**
    IE 的事件代码 在原先事件上添加 add 方法
    */

    obj.attachEvent('onfocus', test('msg')});

    }
    }

     

    function removeEvnent() {

    var obj = document.getElementById("txtIataCity");

    if (window.removeEventListener) {

    obj.removeEventListener('focus',test('msg')}, false);

    }

    else {

    obj.detachEvent('onfocus',test('msg'));

    }

    }

    于是乎执行 ie提示: 类型不匹配 看样子是不支持带参数的函数 于是再次将函数封装成无参形式传入

    执行,添加成功,移除还是失败。在网上找了半天 差不多都是这样写的 都成功了,不知道为什么我的就移除不了。

    后来看页面中本来就引用了jQuery 于是采用jquery的bind 和unbind 事件 一次成功。

    唉,等项目完了 把这个问题解决掉。

  • 相关阅读:
    UIButton 动态改变文本闪烁问题
    利用GDataXML解析XML文件
    限制键盘只能输入数字
    获得view所在的控制器
    使用Canvas绘制简单的时钟控件
    Spring整合ActiveMq消息队列
    Symmetric Key Encryption DES
    OSPF 高级实验
    OSPF 基础实验
    EIGRP 高级实验
  • 原文地址:https://www.cnblogs.com/mysearchblog/p/5511051.html
Copyright © 2011-2022 走看看