快捷搜索:

Javascript加多监听与删除监听用法详解,讲两件事

作者: w88官方网站手机版  发布:2019-09-22

你大概感兴趣的稿子:

  • Javascript 的addEventListener()及attachEvent()不同深入分析
  • add伊芙ntListener 的用法示例介绍
  • window.addEventListener来消除让多个js事件奉行四个函数
  • document.addEventListener使用介绍
  • JS在IE和FF下attach伊夫nt,addEventListener学习笔记
  • 事件绑定之小测验 onclick && addEventListener
  • javascript attach伊芙nt和addEventListener使用格局
  • 详解add伊芙ntListener的多少个参数之useCapture
  • add伊芙ntListener()第多个参数useCapture (Boolean)详细解析
  • addEventListener()与removeEventListener()解析

. this指钟是JavaScript语言中的二个相当指钟,他在代码运营时,指向调用this语句的此时此刻对象. 假如是事件绑定函数,则针对被绑定的元...

Javascript加多监听与删除监听用法详解,javascript详解

正文实例陈诉了Javascript增多监听与删除监听的用法。分享给我们供大家参谋。具体解析如下:

js中事件监听便是选拔add伊夫ntListener来绑定二个风云,那个用法在jquery中丰富常用何况轻易,但在原生js中相比复杂,这里整理了addEventListener事件各艺术的测验与例子供大家参谋学习。

在前两日做播放器的时候拉长监听后删除监听碰着了几许难为,删不掉,后来看了一下才察觉,参数须求完全对应,什么叫完全对应呢,换句话说:

复制代码 代码如下:

$('.video')[0].addEventListener('timeupdate', currentTimeHandler, true);

比方那句,要求传入三个参数,那样本领够删除,为何应当要如此,没有错,蛋疼的地点就在此地:
在add和remove时,第八个参数确实能够不写,但此刻他俩的默许情状是不相同的!!

平日状态下add伊芙ntListener是false…
1、 增多自定义事件监听

复制代码 代码如下:

var eventHandlesCounter=1;//总计增加事件监听的个数,0作为预留位
    function addEvent(obj,evt,fn){
       if(!fn.__EventID){ fn.__EventID=eventHandlesCounter ;}
       if(!obj.__EventHandles){ obj.__EventHandles=[]; }
       if(!obj.__EventHandles[evt]){
           obj.__EventHandles[evt]=[];
           if(obj["on" evt] instanceof Function){
              obj.__EventHandles[evt][0]=obj["on" evt];
              obj["on" evt]=handleEvents;
           }
       }
       obj.__EventHandles[evt][fn.__EventID]=fn;
 
       function handleEvents(){
         var fns = obj.__EventHandles[evt];
         for (var i=0;i<fns.length;i )
            fns[i].call(this);
       }
}

2、自定义删除事件监听

复制代码 代码如下:

function delEvent(obj,evt,fn){
   if(!obj.__EventHandles || !obj.__EventHandles[evt] || !fn.__EventID){
      return false;
   }
   if(obj.__EventHandles[evt][fn.__EventID]==fn){
      delete obj.__EventHandles[evt][fn.__EventID];
   }
}

3. 对上述情势开展修正

复制代码 代码如下:

function addEvent(obj,evt,fn,useCapture){
    if(obj.add伊芙ntListener){//优先选用W3C事件注册
       obj.addEventListener(evt,fn,!!useCapture);
    }else{
       if(!fn.__EventID){fn.__EventID = addEvent.__EventHandlesCounter ;}
       if(!obj.__EventHandles){ obj.__EventHandles=[];}
       if(!obj.__EventHandles[evt]){
           obj.__EventHandles[evt]=[];
           if(obj["on" evt]){
              (obj.__EventHandles[evtype][0]=obj["on" evtype]).__EventID=0;
           }
           obj["on" evtype]=addEvent.execEventHandles;
       }
    }
}
addEvent.__EventHandlesCounter=1;
addEvent.execEventHandles = function(evt){
    if(!this.__EventHandles) {return true;}
    evt = evt || window.event;
    var fns = this.__EventHandles[evt.type];
    for (var i=0;i<fns.length;i ){
       if(fns[i] instanceof Function){
           fns[i].call(this);
       }
    }
};
function delEvent(obj,evt,fn,useCapture){
   if (obj.removeEventListener) {//先使用W3C的主意移除事件管理函数        
       obj.removeEventListener(evt,fn,!!useCapture);
   }else {
      if(obj.__EventHandles){
         var fns = obj.__EventHandles[evt];
         if(fns){delete fns[fn.__EventID];}
      }
}

4、标准化事件指标

复制代码 代码如下:

function fixEvent(evt){
   if(!evt.target){
      evt.target = evt.srcElement;
      evt.preventDefault=fixEvent.preventDefault;
      evt.stopPropagation = fixEvent.stopPropagation;
      if(evt.type == "mouseover"){
         evt.relatedTarget = evt.fromElement;
      }else if(evt.type == "mouseout"){
         evt.relatedTarget = evt.toElement;
      }
      evt.charCode =(evt.type == "keypress")?evt.keyCode:0;
      evt.eventPhase = 2;
      evt.timeStamp = (new Date()).getTime();
   }
return evt;
}
fixEvent.preventDefault=function(){ this.returnValue=false;}
fixEvent.stopPropagation=function(){this.cancelBubble = true;};

fix伊夫nt函数不是单身实践的,它必得有贰个事件指标参数,并且唯有事件产生时它才被推行!最棒的主意是把它整合到addEvent函数的exec伊夫ntHandles里面。

复制代码 代码如下:

add伊夫nt.exec伊夫ntHandles = function (evt) {//遍历全部的事件管理函数并奉行
if (!this.__EventHandles) {return true;}
evt = fixEvent(evt || window.event);//在此地对其张开标准操作
var fns = this.__EventHandles[evt.type];
for (var i=0;i< fns.length;i ) {
if (fns[i] instanceof Function) {
fns[i].call(this,evt);//并且将其看成事件管理函数的首先个参数
//那样在事件处理函数内部就足以选拔统一的方式访谈事件目的了 } } };

地点是大师写了,上边整理多少个实在的监听事情的事例

复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test6.html</title>
 <script type="text/javascript">
  function test(){
   window.alert("您投了三次票");
   document.getElementById("1").detachEvent("onclick",test);
  }
 </script>
  </head>
 
  <body>
    <input type="button" value="投票" id="1"/>
    <script type="text/javascript">
     document.getElementById("1").attachEvent("onclick",test);
    </script>
  </body>
</html>

此间运用document.getElementById("1").attach伊芙nt("onclick",test);实行动态的事件绑定,使用

复制代码 代码如下:

document.getElementById("1").detachEvent("onclick",test)

进行动态的年月的打消,这样就完毕了这么些事件只可以对应三回,后一次再点击那么些开关的时候就不会再发生哪些功用。
上边再演示一个随时监听键盘事件,剖断输入的是还是不是是数字,即使不是数字一贯动态提示,然后拒绝其输入

复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test7.html</title>
 <script type="text/javascript">
  function test(event){
   //客商每按下三个按钮,就去判别是否数字
   if(event.keyCode<48 || event.keyCode > 57){
    window.alert("您输入的不是二个数字");
    return false;
   }
  }
 </script>
  </head>
 
  <body>
    <input type="text" onkeypress="return test(event);" />请输入数字
  </body>
</html>

此处的event正是一个事件目的,他能再次回到非常多的音信,具体请参谋相关文书档案。
 
补给:事件监听方面包车型客车特出

1. IE选取attachEvent/detach伊芙nt方法来增添和删除事件监听器;w3c使用addEventListener/remove伊芙ntListener方法。

  1. IE对其事件选用onevent的命名格局,而w3c的是event的命超级模特式。
    3. IE平地风波监听器内选用的是贰个大局的伊芙nt对象,而w3c是将event对象作为参数字传送递给监听器。
    4. 为了制止接触暗中同意的风云表现,IE的做法是讲求技术员设置Event对象中的returnValue属性值为false,而w3c的做法是施行preventDefault方法。
  2. IE未有提供对事件捕获阶段的支撑。
    6. 要适可而止事件的传递,IE的做法是安装event对象的cancelBubble为true,而w3c的做法是设置进行stopPropagation方法。
    7. IE将事件监听器当做一个独立的函数来调用,而w3c中它是当做对象的诀要来调用的,那意味着在ie中事件监听器中的this关键字指向的不是事件时有产生对象而是贰个空头的大局对象(window对象)。
    8. IE在选用事件监听器方面存在内部存款和储蓄器败露难题。在IE浏览器中,假如要为有个别成分成立四个事变监听器,而且在监听器中动用该因素,则在客商步向别的页面在此之前,该监听器以及有关的DOM节点作攻克的内部存款和储蓄器空间不会被保释。

指望本文所述对我们的javascript程序设计有所帮忙。

本文实例汇报了Javascript加多监听与删除监听的用法。分享给大家供大家参考。具体剖析...

首先件事情.
this 指钟是JavaScript语言中的八个例外指钟,他在代码运维时,指向调用this语句的这段时间对象.
即使是事件绑定函数,则指向被绑定的因素自个儿.
<script type="text/javascript">
//by Go_Rush(阿舜) from  
alert(this===window)  //true  直
接调用的时候,指向window自个儿
var gorush={
    f:function(){
        alert(this===gorush)    //true
    }
}
gorush.f()   //指向 gorush对象
document.onclick=function(){   
    alert(this===document)  //true ,指向 document
}
/*
element.onclick=function(){
    alert(this===element)     //true
}
*/
</script>
刻意要值得注意的是,当八个指标嵌套的时候, this 是指向近来调用它的极其指标的
obj1={
    obj2:{
        f:function(){
            alert(this===obj1.obj2)  //这里 this 并非指向 obj1的哦。
        }
    }
}
obj1.obj2.f()
再举八个非常轻松出错的例证,  点这里六柱预测关链接
<script type="text/javascript">
//by Go_Rush from 
//以下gorush第11中学 this的用法是张冠李戴的,那么些荒唐拾个技师6个犯
var gorush1={
    showMsg:function(){alert("hello,world")},
    doAjax:function(){
        new Ajax.Request("index.php",{onSuccess:function(){
            this.showMsg()
        }})
    }         
}
//gorush第22中学的才是对的
var gorush2={
    showMsg:function(){alert("hello,world")},
    doAjax:function(){
        var self=this;    //备份 gorush2对象 
        new Ajax.Request("index.php",{onSuccess:function(){
            self.showMsg()
        }})
    }         
}
</script>

第二件职业:
   闲话不多说,先上碟小菜.
<script type="text/javascript">
var btn=null
window.onload=function(){
    btn=document.getElementById("btn")    
    if (window.attachEvent) btn.attachEvent("onclick",gorush);
    if (window.addEventListener) btn.addEventListener("click",gorush,false)
}
function gorush(){
    if (this===window) alert("this==window")   //ie6.0下,这句会实践
    if (this===btn)        alert("this==btn")        //ff1.5下,  那句会执行
}
</script>
<input type="button" value="click me" id="btn">
真不通晓为啥 ie 会那样搞,令人异常的苦闷呀,为何把 this 指向 window呢?
缓慢解决方式:
1. 事变绑定的时候绝不用 attach伊芙nt, 可怜的本人,当时即便用的prototype.js的Event.Observe方法
这么 element.onclick=function.....  那样在多少个浏览器中 this 指钟都指向 element
2. 在管理函数 gorush中 用 getEvent()方法统一获取事件,然后在用 evt.srcElement || evt.target 获取 element对象

其次件职业:
   闲话非常的少说,先上碟小菜.
<script type="text/javascript">
var btn=null
window.onload=function(){
    btn=document.getElementById("btn")    
    if (window.attachEvent) btn.attachEvent("onclick",gorush);
    if (window.addEventListener) btn.addEventListener("click",gorush,false)
}
function gorush(){
    if (this===window) alert("this==window")   //ie6.0下,那句会实行
    if (this===btn)        alert("this==btn")        //ff1.5下,  那句会实践
}
</script>
<input type="button" value="click me" id="btn">
真不通晓为啥 ie 会那样搞,令人很抑郁呀,为啥把 this 指向 window呢?
杀鸡取蛋办法:
1. 平地风波绑定的时候不要用 attachEvent, 可怜的本身,当时固然用的prototype.js的Event.Observe方法
这么 element.onclick=function.....  那样在三个浏览器中 this 指钟都指向 element
2. 在管理函数 gorush中 用 getEvent()方法统一获取事件,然后在用 evt.srcElement || evt.target 获取 element对象

第一件事情.
this 指钟是JavaScript语言中的三个奇特指钟,他在代码运维时,指向调用this语句的最近对象.
比方是事件绑定函数,则指向被绑定的要素本人.
<script type="text/javascript">
//by Go_Rush(阿舜) from  
alert(this===window)  //true  直
接调用的时候,指向window本人
var gorush={
    f:function(){
        alert(this===gorush)    //true
    }
}
gorush.f()   //指向 gorush对象
document.onclick=function(){   
    alert(this===document)  //true ,指向 document
}
/*
element.onclick=function(){
    alert(this===element)     //true
}
*/
</script>
专门要值得注意的是,当八个指标嵌套的时候, this 是指向近来调用它的老大指标的
obj1={
    obj2:{
        f:function(){
            alert(this===obj1.obj2)  //这里 this 并非指向 obj1的啊。
        }
    }
}
obj1.obj2.f()
再举三个特别轻松出错的例证,  点这里占星关链接
<script type="text/javascript">
//by Go_Rush from 
//以下gorush第11中学 this的用法是漏洞相当多的,那几个错误13个技师6个犯
var gorush1={
    showMsg:function(){alert("hello,world")},
    doAjax:function(){
        new Ajax.Request("index.php",{onSuccess:function(){
            this.showMsg()
        }})
    }         
}
//gorush第22中学的才是对的
var gorush2={
    showMsg:function(){alert("hello,world")},
    doAjax:function(){
        var self=this;    //备份 gorush2对象 
        new Ajax.Request("index.php",{onSuccess:function(){
            self.showMsg()
        }})
    }         
}
</script>

本文由www.w88985.com发布于w88官方网站手机版,转载请注明出处:Javascript加多监听与删除监听用法详解,讲两件事

关键词: www.w88985.c