JS事件类型+绑定+冒泡、捕获分析.对象.on+事件=function(event){...} //这种方法兼容性好但只

JS事件绑定当然是为了实现与用户之间的交互效果，小编这边自己做笔记的同时也跟大家一起分享一下。

事件绑定

.对象.on+事件=function(event){...} //这种方法兼容性好但只能为对象绑定单个事件。
对象.addEventListener(事件,处理函数,false) //该方法常用，可以为对象绑定多个事件

这边小编为第二个方法要补充的一点是，当调用函数放在其中时事件一样则相当于绑定了一个事件（原因：函数地址相同），但在个里面写上相同的代码无法实现相当于绑定了两个一样的事件都会执行。

封装绑定事件函数

//参数为  对象、事件类型、事件函数
function addEvent(elem,type,handle){
          if(elem.addEventListener){
              elem.addEventListener(type,handle,false);
          }
          else if(elem.addEvent){
              //IE9以下专用
              elem.addEvent('on'+type,function(){
                  handle.call(elem);  //以elem为对象调用handle方法
              })
          }
          else{
              //兼容性最好
              elem['on'+type]=handle;
          }
  }

事件冒泡、捕获

冒泡
当标签结构上有嵌套关系是时绑定事件会产生冒泡现象举个简单的例子我们写三个有嵌套关系的盒子，附上点击事件。

<body>
    <div style="width: 100px;height:100px; background-color: red; ">
        <div style="width: 50px;height:50px; background-color: green; ">
            <div style="width: 30px;height:30px; background-color: yellowgreen; "></div>
        </div>
    </div>
  <script>
        var div=document.getElementsByTagName('div');
                var div=document.getElementsByTagName('div');
        div[0].addEventListener('click',function(){
            console.log("a");
        },false);
        div[1].addEventListener('click',function(){
            console.log("b");
        },false);
        div[2].addEventListener('click',function(){
            console.log("c");
        },false);
  </script>    
</body>

点击浅绿色区域会产生冒泡（事件由子元素冒到父元素），注意只要结构上有嵌套关系就会，哪怕定位出去。

捕获
当我们定义事件时addEventListener最后一个参数为true时绑定的改事件为捕获事件，与冒泡相反
捕获冒泡同时存在
捕获优先

常见事件类型

鼠标事件
- click：点击
- mouseup、mousedown：按下、抬起
- mouseover：悬停
- mouseout：离开
键盘事件
- keypress：按键
- keydown、keyup：按下、抬起
keydown监听所有键位，keypress监听ascii码键位
文本事件
- input：内容有变就发生（主要是value值随时变化）
- change：获取焦点时和失去焦点时内容有变就发生
- focus：聚焦时发生
- blur：失去焦点发生

ending...