JS事件类型+绑定+冒泡、捕获分析

时间 2019-12-07

原文原文链接

JS事件绑定固然是为了实现与用户之间的交互效果，小编这边本身作笔记的同时也跟你们一块儿分享一下。javascript

事件绑定

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

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

封装绑定事件函数

//参数为 对象、事件类型、事件函数
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>
复制代码

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

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

常见事件类型

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

ending...ui