js 动态给元素添加、移除事件的实现方法_javascript技巧

最近项目中要要到 js动态给给元素绑定事件,刚好之前没用到过这些,顺便学习一下,于是google了一下 事件,写了如下两个事件 一个添加事件 ,一个是移除事件

/addEventListener(),removeEventListener()用于处理指定和删除事件处理程序的操作
//作用域:事件处理程序会在其所属元素的作用域内运行
//addEventListener(event,function,capture/bubble);removeEventListener(event,function,capture/bubble)
//参数event如上表所示, function是要执行的函数, capture与bubble分别是W3C制定得两种时间模式,
//简单来说capture就是从document的开始读到最后一行, 再执行事件, 而bubble则是先寻找指定的位置再执行事件.
//capture/bubble的参数是布尔值, 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 事件 一次成功。

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

以上这篇js 动态给元素添加、移除事件的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js
, 事件
动态添加元素
javascript 移除元素、js动态移除元素、javascript 移除class、javascript 移除属性、javascript数组移除,以便于您获取更多的相关知识。

时间: 2016-07-19

js 动态给元素添加、移除事件的实现方法_javascript技巧的相关文章

JS动态给对象添加属性和值的实现方法_javascript技巧

如下所示: var obj={}; for(var i=0;i<10;i++){ eval("obj.p"+i+"="+i); } 以上就是小编为大家带来的JS动态给对象添加属性和值的实现方法全部内容了,希望大家多多支持~ 以上是小编为您精心准备的的内容,在的博客.问答.公众号.人物.课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js 北京赛车冠亚和值技巧.时时彩和值技巧.福彩3d和值计算技巧.快3和值技巧.重庆时时彩和值技巧,以便于您获取更多的

js 动态为textbox添加下拉框数据源的方法_javascript技巧

复制代码 代码如下: $("#<%=lstCarBrand.ClientID%>").change(function () { $("#<%=txtCarSeries.ClientID%>").val("");//清除文本框 $("#<%=txtCarSeries.ClientID%>").unautocomplete();//清除autocomplete $("#<%=tx

JS动态修改图片的URL(src)的方法_javascript技巧

本文实例讲述了JS动态修改图片的URL(src)的方法.分享给大家供大家参考.具体如下: 下面的JS代码可以动态修改图片地址,以显示一张新的图片,实际上是通过修改图片的src属性来实现的 <!DOCTYPE html> <html> <head> <script> function changeSrc() { document.getElementById("myImage").src="hackanm.gif"; }

JavaScript实现为指定对象添加多个事件处理程序的方法_javascript技巧

本文实例讲述了JavaScript实现为指定对象添加多个事件处理程序的方法.分享给大家供大家参考.具体如下: 如果你希望对象点击的时候同时处理多个事情,可以使用下面的代码 /* Start of the multihandle Object...*/ function MultiHandle(owner){ var my_handlers = new Array(); var my_owner = owner; this.append = function(handler){ my_handle

JS动态给对象添加事件的简单方法_javascript技巧

WEB项目中,我们常常会碰到要动态对相应的对象添加事件,如下,有id="txtPrice"的文本框控件: <div> <input type="text" id="txtPrice" name = "txtPrice" value = "0"/> <div> 现在我们为其动态添加一事件,JS核心代码如下: document.getElementById("txt

原生JS和JQuery动态添加、删除表格行的方法_javascript技巧

本文实例讲述了原生JS和JQuery动态添加.删除表格行的方法.分享给大家供大家参考.具体分析如下: 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). 原生态JS版: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

js实现对table动态添加、删除和更新的方法_javascript技巧

本文实例讲述了js实现对table动态添加.删除和更新的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999

通过js为元素添加多项样式,浏览器全兼容写法_javascript技巧

js给元素添加多项样式,浏览器全兼容示例写法: <a href="javascript:;" id="test" style="font-size:25px;background:#080;">测试3</a> <script> var obj=document.getElementById("test"); var oldStyle=obj.style.cssText; alert(oldS

js中动态创建json,动态为json添加属性、属性值的实例_javascript技巧

如下所示: var param = {}; for(var i=0;i<fields.length;i++){ var field = fields[i]; if(field.searchCondition != undefined && $('#search'+field.name).val() != ''){ param["search."+field.name]=$('#search'+field.name).val(); } } 在js中,一个[]认为是数