`
yangguoklose
  • 浏览: 19985 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

JS绑定事件的函数方法—addEventListener()和attachData()

    博客分类:
  • JS
阅读更多
为了是js代码在html中更加可读,通常可在JS代码中为制定元素绑定事件,即用addEventListener()(NN6+/Moz/W3C)和attachData(IE5+)方法来绑定事件
   代码如下:绑定事件函数
   function addEvent(elem,evtType,func){
       if(elem.addEventListener){
          elem.addEvenListerner(evtType,func,false); 
       }else if(elem.attachEvent) {
          elem.attachEvent("on" + evtType,func);
       }else{
          elem["on" + evtType] = func;
       }
   }

   使用方法实例:
  function addstyle(){
      ...//代码块
   }
   addEvent(window,"load",function(){//当网页完全加载成功后,为submit按钮添加一点点击触发事件,执行函数addstyle()
      addEvent(document.getElementByIdx_x("addint"),"click",addstyle);
   });

   html代码:
   <input type="submit" id="addint" />
分享到:
评论

相关推荐

    动态的绑定事件addEventListener方法的使用

    本文为大家介绍下动态的绑定事件的方法addEventListener的使用示例,不了解的朋友可以参考下

    JS中动态添加事件(绑定事件)的代码

    两种方式:直接给对象添加事件,节点添加事件 例如给一个id为tab1的添加onclick事件 第一种情况: 代码如下: var t = document.getElementById(“tab1”); t.onclick = function tst(){ alert&#40;”&#41;; } 第二种...

    addEventListener和attachEvent二者绑定的执行函数中的this不相同

    最近在写一个事件代理的时候,遇到一个BUG,发现除此外,二者绑定的执行函数中的 this 是不相同的,addEventListener 和 attachEvent函数在运行时候的上下文是不相同的。 用了一个简单的demo来描述这个不同点: ...

    详解javascript事件绑定使用方法

    由于html是从上至下加载的,通常我们如果在head部分引入javascript文件,那么我们都会在javascript的开头添加[removed]事件,防止在文档问加载完成时进行DOM...addEventListener(事件名称,函数, 捕获) removeEventListe

    事件高级用法及兼容写法

    注意:一定要保证移除事件时和添加事件时是同一个事件函数 事件绑定兼容性问题:在低版本IE中(IE 6/7/8)不支持addEventListener和removeEventListener, 在低版本IE中可以使用: attachEvent(事件名,事件函数) 绑定...

    javascrpt绑定事件之匿名函数无法解除绑定问题

    经常听到有人说,匿名函数绑定事件不好控制啊,无法解除绑定啊等等等等,一直很奇怪谁说的不能解除绑定。 下面来实现click事件2次后,自动解除绑定。 看代码: 代码如下: var dom=document.getElementById(“test”)...

    window.addEventListener来解决让一个js事件执行多个函数

    可能你也碰到过这种情况,就是在js的代码中用了[removed]后,可能会影响到body中的onload事件。你可以全写在body中,也可以全放到[removed]中,但是这样并不是很方便,有时我们需要两个同时用到。这时就要用window....

    js绑定事件和解绑事件

    在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性 attachEvent方法 只支持IE678,不兼容其他浏览器 addEventListener方法 兼容火狐谷歌,不兼容IE8及以下 ...

    理解JS绑定事件

    这两个方法都有三个参数,分别为:事件类型,事件函数,最后一个是布尔值,true或者是false。 true表示在事件捕获阶段执行,false表示在事件冒泡阶段执行。 由于IE只支持事件冒泡,所以同大多数情况下,都是将事件...

    JavaScript实现跨浏览器的添加及删除事件绑定函数实例

    本文实例讲述了JavaScript实现跨浏览器的添加及删除事件绑定函数。分享给大家供大家参考。具体如下: IE 的事件绑定函数是 attachEvent;而 Firefox, Safari 是 addEventListener;Opera 则两种都支持。使用jQuery就...

    JS的事件绑定深入认识

    脚本模型是将事件处理函数写到js文件中,从页面获取元素进行对应事件函数的绑定以触发执行。但也存在不足之处: 1.一个事件绑定多个事件监听函数,后者将覆盖前者。 2.需要限制重复绑定的情况 3.标准化event对象 二...

    浅谈JavaScript事件绑定的常用方法及其优缺点分析

    传统方法只会在事件冒泡中运行,而非捕获和冒泡 一个元素一次只能绑定一个事件处理函数。新绑定的事件处理函数会覆盖旧的事件处理函数 事件对象参数(e)仅非IE浏览器可用 W3C方式  element.addEventListener('...

    js添加绑定事件的方法

    先介绍js添加事件通用方法,具体内容如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=UTF-8&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; 测试添加事件:firefox使用...

    事件绑定之小测试 onclick &amp;&amp; addEventListener

    昨晚回去后,和雷子讨论如何才能“检测”到页面上某个元素都绑定了哪些事件监听函数,第一感觉就是应该从浏览器入手,比如FF,或者Chrome等

    封装了一个支持匿名函数的Javascript事件监听器

    关于js中的事件监听大家用的比较多了,无非是判断浏览器是否支持addEventListener和attachEvent,网上搜索关于事件监听的方法也挺多,但是总有些不是很完善。下面的方法中对于添加事件监听的方法是一样的,只不过在...

    javascript实现简单的on事件绑定

    实现一个简单的on和off方法 介绍: Event对象:  funcList: {}, //保存delegate所绑定的方法   ieFuncList :{} //保存ie下的绑定方法 Event 对象中的 on, off 方法,主要调用 Event.addEvent, Event....

    详解Canvas事件绑定

    而js只能监听到canvas的事件,很明显这个图片是不存在与dom里面的图片只是画在了canvas里而已。下面我就来简单的实现一个canvas内部各个图片的事件绑定。 我先来讲下实现原理:其实就是canvas绑定相关事件,在通过...

    addeventlistener监听scroll跟touch(实例讲解)

    这三个事件只在手机上生效 touchstart:手指开始触屏 touchmove:手指移动 touchend:手指触屏结束 这个事件在手机上跟在pc端都生效 scroll事件 addeventlistener(name,callback,optional,useCapture) useCapture...

    【JavaScript源代码】javascript事件冒泡,事件捕获和事件委托详解.docx

    javascript事件冒泡,事件捕获和事件委托详解  1、事件冒泡:在javascript事件传播... js事件捕获一般通过DOM2事件模型addEventListener来实现的: target.addEventListener(type, listener, useCapture) 第三个参

Global site tag (gtag.js) - Google Analytics