zoukankan      html  css  js  c++  java
  • javaScript中的事件三

    javaScript中的事件三

    先看两种错误的写法,他们的目的都是:添加两个事件;

    错误方式一:

      window.onload=function (){
        alert('event 1');  
      }
      window.onload=function (){
        alert('event 2')  
      }

    错误方式二:

    window.onload=function (){
        var obj=document.getElementById("but");
        obj.onclick=function(){
         alert('event 1');    
        }
        obj.onclick=function(){
         alert('event 2');    
        }
      }

    结果他们弹出的都是 event 2

    正确的写法:(ie下的attachEvent 事件顺序还是有问题的,有待优化)

     function addEvent(obj,eventName,fn){
         //还要考虑到兼容性的问题
         if(obj.attachEvent!=undefined){
            //这个是ie下面的
            obj.attachEvent('on'+eventName,fn);
            //这里还值得注意的是在ie6-8 中事件事件的顺序和你注册的事件时相反的呀
            //还有在ie下的事件是有 on 关键字滴呀
            //在ff 和chrome 中是没有的
         }else{
            //这个是chrome 和ff 下的
            obj.addEventListener(eventName,fn,false);
         }
     }
     
      window.onload=function (){
        var obj=document.getElementById("but");
        addEvent(obj,'click',function (){
            alert('event 1');    
        });  
        addEvent(obj,'click',function (){
            alert('event 2');    
        });
      }

    事件可以绑定,那么事件就是可以解除滴呀;解除的方式如下:

    //这里是我们的注册事件
     function addEvent(obj,eventName,fn){
         //还要考虑到兼容性的问题
         if(obj.attachEvent!=undefined){
            //这个是ie下面的
            obj.attachEvent('on'+eventName,fn);
            //这里还值得注意的是在ie6-8 中事件事件的顺序和你注册的事件时相反的呀
            //还有在ie下的事件是有 on 关键字滴呀
            //在ff 和chrome 中是没有的
         }else{
            //这个是chrome 和ff 下的
            obj.addEventListener(eventName,fn);
         }
     }
     //这是我们额取消事件的呀
      function subEvent(obj,eventName,fn){
          if(obj.attachEvent!=undefined){
              obj.detachEvent('on'+eventName,fn);
          }else{
              obj.removeEventListener(eventName,fn);
          }
      }
      function alertA(){
        alert('event 1');  
      }
      function alertB(){
        alert('event 2');  
      }
      window.onload=function (){
        var obj=document.getElementById("but");
        addEvent(obj,'click',alertA);  
        addEvent(obj,'click',alertB);
        
        //如果我们执行下面的方法,那么我们取消了注册的事件滴呀
        subEvent(obj,'click',alertA);
        subEvent(obj,'click',alertB);
        
      }
      

    还有有一个事件捕获的概念(仅仅在我们的ie中才有的事件滴呀)

     window.onload=function (){
         var obj=document.getElementById("but");
         obj.onclick=function (){
            alert('click event '); 
         }
         //这个东西只能在ie中使用滴呀
         obj.setCapture();
         //接下来,你在页面的中任何地方执行一个onclick事件,
         //该事件都会在button中进行触发的呀,这个就是我们的事件捕获滴呀
     }

     释放捕获的方法:

    obj.releaseCapture();

  • 相关阅读:
    go视频提取音频
    ffmpeg常用命令 转
    mac安装homebrew
    go读取键盘输入两种方式
    静态方法加锁,和非静态方法加锁区别
    Java类锁和对象锁实践和内部私有锁关联
    Java基础】并发
    一步一步掌握线程机制(六)---Atomic变量和Thread局部变量
    compareAndSet() 注意点
    Java JUC之Atomic系列12大类实例讲解和原理分解
  • 原文地址:https://www.cnblogs.com/mc67/p/5205327.html
Copyright © 2011-2022 走看看