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

最新推荐文章于 2023-12-13 00:17:55 发布

司_尘

最新推荐文章于 2023-12-13 00:17:55 发布

阅读量230

点赞数

分类专栏：前端文章标签： JS事件绑定 JS冒泡捕获 JS事件类型

本文链接：https://blog.csdn.net/qq_40833779/article/details/88697211

版权

前端专栏收录该内容

51 篇文章 0 订阅

订阅专栏

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

一、事件绑定

1.对象.on+事件=function(event){...} //这种方法兼容性好但只能为对象绑定单个事件。

2.对象.addEventListener(事件,处理函数,false) //该方法常用，可以为对象绑定多个事件

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

IE专用这边小编就不单独介绍，我们看一个封装兼容的事件绑定函数：

 //参数为  对象、事件类型、事件函数
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;
            }
        }

除IE专用方法之外其余两个方法this都是指向引用对象，所以在封装中以call方法调用该函数改变this指向。

还有一个小的操作方法点：当我们遇到对象.事件时因为参数要结合的原因不能用.去实现时我们可以用中括号去实现。

二、事件冒泡、捕获

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

<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时绑定的改事件为捕获事件，与冒泡相反那么上述例子如果是捕获的话输出a、b、c。

那么当捕获冒泡同时发生时呢？

看案例：

<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');
        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);
        div[0].addEventListener('click',function(){
            console.log("捕获a");
        },true);
        div[1].addEventListener('click',function(){
            console.log("捕获b");
        },true);
        div[2].addEventListener('click',function(){
            console.log("捕获c");
        },true);
  </script>    
</body>

当我们点击时结果为：

我们可以看到捕获优先于冒泡，然而由于是点击自身所以，捕获到自身时是看代码绑定事件顺序。

三、常见事件类型

要点：我们绑定事件时函数中都会有一个参数e（事件发生时系统传给该参数数据），我们可以打印出来，记录事件发生时的一些系统信息

像上面的案例我们打印e试试:

div[0].addEventListener('click',function(e){
            console.log(e);
            console.log("冒泡a");
        },false);

返回这样的一个对象其中很多信息可以为我们所用

鼠标事件：

点击：click

按下、抬起：mouseup、mousedown //只有这两个事件类型可以区分左右键（通过参数e中属性进行查找）

移动：mousemove

悬停：mouseover

离开：mouseout

键盘事件：

按键：keypress

按下、抬起：keydown、keyup

keydown监听所有键位，keypress监听ascii码键位

文本事件：

input：内容有变就发生（主要是value值随时变化）

change：获取焦点时和失去焦点时内容有变就发生

focus：聚焦时发生

blur：失去焦点发生

司_尘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录