六合开奖结果现场直播欢迎诸位!收藏本站注 册登 陆
常用三肖中特马:基础知识网络知识操作系统WPS网页制作数据库算法网页成功之路网络安全最新技术古典mid流行midmid背景下载中心
您现在的位置:首页 > 三肖中特马 > 文章页

JS监听示例代码

Admin | 2015-5-1 9:22:50 | ReadNums | 1656 | 标签 网页制作 | 打印本页
     

  当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事件发生时,只会执行最后绑定的方法。比如下面的代码:

  var btn = document.getElementById("yuanEvent"); 
  window.onload = function(){ 
     btn.onclick = function(){ 
        alert("第一个事件"); 
     } 
     btn.onclick = function(){ 
        alert("第二个事件"); 
     } 
     btn.onclick = function(){ 
        alert("第三个事件"); 
     } 

  运行的结果只输出:第三个事件,因为后一个方法都把前一个方法覆盖掉了。

  而用事件监听则不会有覆盖的现象,每个绑定的事件都会被执行。

  ①添加监听事件

  var eventOne = function(){ 
        alert("第一个监听事件"); 
      } 
      function eventTwo(){ 
         alert("第二个监听事件"); 
     } 
     window.onload = function(){ 
         var btn = document.getElementById("yuanEvent"); 
         //addEventListener:绑定函数 
         btn.addEventListener("click",eventOne); 
         btn.addEventListener("click",eventTwo); 
     } 

  输出:第一个监听事件 和 第二个监听事件

  ②添加监听与解除事件

  var eventOne = function(){ 
        alert("第一个监听事件"); 
     } 
     function eventTwo(){  
        alert("第二个监听事件"); 
     } 
     window.onload = function(){ 
        var btn = document.getElementById("yuanEvent"); 
        btn.addEventListener("click",eventOne); 
        btn.addEventListener("click",eventTwo); 
        btn.removeEventListener("click",eventOne); 
     } 

  输出:第二个监听事件

  ③兼容各种浏览器的监听事件的通用代码

  /*  addEventListener:监听Dom元素的事件  */ 
  function addEventHandler(target,type,func){ 
      if(target.addEventListener){ 
         //监听IE9,谷歌和火狐 
         target.addEventListener(type, func, false); 
      }else if(target.attachEvent){ 
         target.attachEvent("on" + type, func); 
      }else{ 
          target["on" + type] = func; 
      }  
  } 

  /*  removeEventHandler:移除Dom元素的事件  */ 
  function removeEventHandler(target, type, func) { 
     if (target.removeEventListener){ 
         //监听IE9,谷歌和火狐 
         target.removeEventListener(type, func, false); 
     } else if (target.detachEvent){ 
         target.detachEvent("on" + type, func); 
     }else { 
         delete target["on" + type]; 
     } 
 } 
 var eventOne = function(){ 
     alert("第一个监听事件"); 
 } 
 function eventTwo(){ 
     alert("第二个监听事件"); 
 } 
 window.onload = function(){ 
     var bindEventBtn = document.getElementById("bindEvent"); 
     //监听eventOne事件 
     addEventHandler(bindEventBtn,"click",eventOne); 
     //监听eventTwo事件 
     addEventHandler(bindEventBtn,"click",eventTwo ); 
     //监听本身的事件 
     addEventHandler(bindEventBtn,"click",function(){ 
         alert("第三个监听事件"); 
     }); 
     //取消第一个监听事件 
     removeEventHandler(bindEventBtn,"click",eventOne); 
     //取消第二个监听事件 
     removeEventHandler(bindEventBtn,"click",eventTwo); 
 }


问题未解决:在线咨询

网友评论

(访客)
内容实用原创,讲得很好。
20xx年x月x日
(站长)
有问题请在线咨询。
20xx年x月x日