一，鼠标手动触发事件

这类事件是我们最常用，也是动作交互的核心。

1.单击事件与双击事件

click事件的绑定：

    
    
         
     
     
      
        var ele1=document.getElementById("ele1"); ele1.onclick=function(){  console.log(1); };
      
     
    

监听后，我们的触发条件就是点击这个元素，每次点击都触发一次回调处理。我们按下后长按发现是不会输出内容的，只有在鼠标抬起后执行绑定函数，说明click事件的触发点在鼠标抬起后。

除了单击，我们在操作系统中还有双击事件：

    
    
         
     
     
      
        var ele1=document.getElementById("ele1"); ele1.ondblclick=function(){  console.log(1); };
      
     
    

必须在较短时间点击2次才会触发。

2.鼠标组合事件

click事件我们设想一下其实一般包含三步操作，鼠标按下，移动（可有可无），抬起。

我们分别监听三个事件：

    
    
         
     
     
      
        var ele1=document.getElementById("ele1"); ele1.onmousedown=function(){  console.log(1); }; ele1.onmousemove=function(){  console.log(2); }; ele1.onmouseup=function(){  console.log(3); };
      
     
    

move事件只要移动就会触发，但是按下事件的下一次触发必须在抬起事件之后，也就是一次click完成之后。

我们按下后不动，保持长按其实只会触发一次按下事件。

 3.单击事件的冒泡

 为何会出现冒泡问题，我们有两个div，其中一个放在另一个内部，我们分别监听了单击事件，其实点击内部的div肯定点击了外部div，点击外部div不一定会点击内部div：

    
    
         
     
     
          
      
               
       
         var ele1=document.getElementById("ele1"); var ele2=document.getElementById("ele2"); ele2.onclick=function(){  alert(2); }; ele1.onclick=function(){  alert(1); };  
       
      
     
    

先执行内部在执行外部，如果我们内部是让某个div显示，外部是让那个div隐藏，这样就发生了冲突，不能实现点击内部div去隐藏，我们可以利用事件对象去阻止冒泡：

ele2.onclick=function(event){  alert(2);  event.stopPropagation(); };

点击内部div，事件执行后阻止往上查找父辈元素的绑定处理。

 4.事件委托

委托的原理就是来自冒泡，还是上面的例子，我们在外部div里有3个div，其实点击三个内部div哪一个都会点击到外部div，所以我们就可以把每个内部div的事件绑定统一绑定到外部div上，然后利用标志区分去触发相应函数。

我们先看最普通的处理方式，分别绑定：

    
    
         
     
     
          
      
                   
       
                    
        
                 
         
           var ele1=document.getElementById("ele1"); var ele2=document.getElementById("ele2"); var ele3=document.getElementById("ele3"); var ele4=document.getElementById("ele4"); ele2.onclick=function(event){  alert(2); }; ele3.onclick=function(){  alert(3); };  ele4.onclick=function(){  alert(4); }; 
         
        
       
      
     
    

我们在使用委托的处理机制：

ele1.onclick=function(event){  var tar=event.target;  if(tar.id=="ele2"){   alert(2);  }else if(tar.id=="ele3"){   alert(3);  }else if(tar.id=="ele4"){   alert(4);  }else{   alert(1);  }; };

利用event.target获取最小触发元素，根据id的区别做了判断处理，是不是省去很多绑定事件的代码。

 5.获取焦点和失去焦点

同click事件类似：

    
    
         
     
     
          
      
       
         var ele1=document.getElementById("ele1"); var ele2=document.getElementById("ele2"); ele2.onfocus=function(event){  console.log(1); }; ele2.onblur=function(event){  console.log(2); };   
       
      
     
    

6.不是所有事件都可以冒泡

上面我们测试了获取焦点事件，我们看看可以冒泡吗？

    
    
         
     
     
          
      
       
         var ele1=document.getElementById("ele1"); var ele2=document.getElementById("ele2"); ele2.onfocus=function(event){  console.log(1); };   ele1.onfocus=function(event){  console.log(2); };
       
      
     
    

是不是不会输出父元素的内容，因为父元素是不具备焦点事件的，

7.鼠标组合事件模拟拖拽实现

页面一个div可以拖拽移动，先说原理，我们会先按下（拖拽div），然后移动（拖拽div跟随），最后抬起（拖拽div静止）。

整个流程每次要发生在一套click的内部：

    
    
         
     
     
       登录
      
      
    密码
      
      
    
      
      
       window.onload=function(){  var drag=document.getElementById("drag");   var isd=0;   var elex=0;  var eley=0;  drag.onmousedown=function(event){    isd=1;     elex=event.clientX-drag.offsetLeft;   eley=event.clientY-drag.offsetTop;   };  drag.onmousemove=function(event){    if(isd==1){    var evx=event.clientX;    var evy=event.clientY;    var cx=evx-elex;    var cy=evy-eley;    drag.style.left=cx+"px";    drag.style.top=cy+"px";     }else{}      };  drag.onmouseup=function(event){     isd=0;  };    };
      
     
    

慢慢的拖动好像没问题，但是我们快速移动鼠标，鼠标脱离拖拽体，就出现问题了，在移入就粘连了，我们的问题就是把move和up事件也绑定在了拖拽体上，我们修改对象，绑定到html对象上：

window.onload=function(){  var drag=document.getElementById("drag");   var isd=0;   var elex=0;  var eley=0;  drag.onmousedown=function(event){    isd=1;     elex=event.clientX-drag.offsetLeft;   eley=event.clientY-drag.offsetTop;   };  document.documentElement.onmousemove=function(event){    if(isd==1){    var evx=event.clientX;    var evy=event.clientY;    var cx=evx-elex;    var cy=evy-eley;    drag.style.left=cx+"px";    drag.style.top=cy+"px";     }else{}      };  document.documentElement.onmouseup=function(event){     isd=0;  };    };

用金星老师话说配合姿势，这就是完美！在组合处理中选择正确的绑定元素至关重要。

二，键盘触发事件

主要输入设备除了鼠标还有就是键盘。

键盘有啥？按下，长按，抬起，我们分别绑定：

    
    
         
     
     
          
      
       
         var ele1=document.getElementById("ele1"); var ele2=document.getElementById("ele2"); ele2.onkeydown=function(event){  console.log(1); };  ele2.onkeypress=function(event){  console.log(2); }; ele2.onkeyup=function(event){  console.log(3); }; 
       
      
     
    

按下事件的每次触发也是在本次抬起结束后。

三，异步事件

这个名字是我自己起的，原因就是这些事件的触发要经过一段时间，去判断某个状态是否达到。

1.load载入完成事件

我们在看别人的js是这样的：

window.onload=function(){ var ele1=document.getElementById("ele1"); var ele2=document.getElementById("ele2"); ele2.onkeydown=function(event){  console.log(1); };  ele2.onkeypress=function(event){  console.log(2); }; ele2.onkeyup=function(event){  console.log(3); }; };

加入load事件，那么里面的程序就会在页面html加载完执行，避免无结构先发生处理。

load的重要在图片处理上是非常的重要，现在css3盛行，我们会加入很多动画处理，动画处理会用到很多图片，假如用到了4张，如果图片没加载完，我们动画执行了，客户怎么看？这时候我们就要对5张图都进行load完成判断，确定4张ok才去引入动画css是不是。

    
    
         
         
     
       /*reset*/ *{ padding:0; margin:0} body{ height: 100%; width: 100%; font-size:12px; color:#333;} ul{ list-style:none;} /*demo*/ .box{width: 900px;margin: 0 auto;} .box img{ width: 200px;height: 200px;margin: 10px;border: 1px solid #000;} 
      
            
       
             
        
              
         
               
          
                    
           
              var imgo=document.querySelectorAll(".readyimg");  var imglen=imgo.length;  var isimg=[];  for(var i=0;i
            
             
              
             
            
           
          
         
        
       
      
     
    

只有在4张图被载入完才会执行处理，我们每次测试ctrl+f5可以测试。

2.ajax事件

xmlhttp.onreadystatechange ajax对象只要发现状态变化就会触发处理

四，其他事件

上面都是最常用事件，js为我们的交互提供的事件是非常多的，移动端的touch事件，音视频的播放事件，卸载事件，关闭窗口事件等等等。