JavaScript事件对象、target和this的区别、阻止默认事件、阻止冒泡、事件委托

向右看齐 2022-12-24 04:58 152阅读 0赞

# JavaScript事件对象 #

1.  event就是一个事件对象，写在侦听函数的小括号里面当形参来看。
2.  事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
3.  事件对象是我们事件的一系列相关数据的集合，根事件相关的信息，如果是鼠标点击事件里面包含了鼠标的相关信息，例如鼠标的坐标等，如果是键盘时间里面就包含了键盘时间的信息，比如用户按下了哪个键。
4.  时间对象可以自己命名，不一定非要使用event，比如可以为event、evt、e等
5.  存在兼容性问题，IE678通过window.event获取。

<body>
        <div>
            12121212
        </div>
        <script>
        	var div = document.querySelector('div');
            // 传统的事件对象
           // div.onclick = function(event){
         
           //     console.log(event);
           // }
            //方法监听方式
            div.addEventListener('click',function(e){
         
                console.log(e);
            })
        </script>
    </body>

事件对象的常见属性和方法

<table> 
 <thead> 
  <tr> 
   <th>事件对象属性方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>e.target</td> 
   <td>该属性返回触发事件的对象 标准</td> 
  </tr> 
  <tr> 
   <td>e.srcElement</td> 
   <td>该属性返回触发事件的对象 非标准（IE 6/7/8使用）</td> 
  </tr> 
  <tr> 
   <td>e.type</td> 
   <td>该属性返回事件的类型 比如 click mouseover 不带on</td> 
  </tr> 
  <tr> 
   <td>e.cancelBubble</td> 
   <td>该属性阻止冒泡 非标准 （IE 6/7/8使用）</td> 
  </tr> 
  <tr> 
   <td>e.stopPropagation()</td> 
   <td>该方法阻止冒泡 标准</td> 
  </tr> 
  <tr> 
   <td>e.returnValue</td> 
   <td>该属性阻止默认事件（默认行为） 非标准 （IE6/7/8使用）</td> 
  </tr> 
  <tr> 
   <td>e.preventDefault()</td> 
   <td>该方法阻止默认事件（默认行为） 标准 比如不让链接跳转</td> 
  </tr> 
 </tbody> 
</table>

#### e.target和this的区别 ####

e.target返回的是触发事件的对象，this返回的是绑定事件的对象。

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>e.target和this的区别</div></title>
    
        <style>
            *{
         
                margin: 0px;
                padding: 0px;
            }
            div {
         
                margin: auto;
                width: 100px;
                height: 100px;
                background-color: blue;        }
            ul {
         
                margin: auto;
                width: 200px;
                height: 300px;
                background-color: brown;
            }    
            ul li {
         
                list-style: none;
                width: 150px;
                height: 100px;
                background-color: coral;
            }
        </style>
    </head>
    <body>
        <div>1212</div>
        <ul>
            <li>11</li>
            <li>22</li>
            <li>33</li>
        </ul>
        <a href="https://blog.csdn.net/weixin_42579348?spm=1010.2135.3001.5113">我的CSDN博客地址</a>
    
        <script>
            //第一段程序
            var div = document.querySelector('div');
            //div.addEventListener('click',function(e){
         
            //    console.log(e.target);
             //   console.log(this);
            //})
            //运行程序，点击div框，会出现两条相同的结果
    		
            //第二段程序
            var ul = document.querySelector('ul');
            ul.addEventListener('click',function(event){
         
                console.log(event.target);
                console.log(this);
            })
            //运行程序，点击ul中的一个li，会出现两条结果，但是结果不同。
            
            //第三段程序  返回事件类型
            div.addEventListener('click',function(e){
         
                console.log(e.type);
            })
            
             //第四段程序，阻止默认事件   让链接不跳转  （或者让提交按钮不提交等）
            //var a = document.querySelector('a');
            //a.addEventListener('click',function (e) {
         
            //    e.preventDefault();
            //})
        </script>
    </body>
    </html>

1.  运行第一段程序，可以得到两条相同的结果：

![在这里插入图片描述][20201126205030561.png_pic_center]

1.  运行第二段程序，可以得到两条不同的结果

![在这里插入图片描述][20201126205044632.png_pic_center]

通过两次程序运行结果的比较，可以看出第二次程序运行后event.target返回的是li，而this返回的是整个ul。因为当前绑定的是ul，点击的是li；event.target返回的是触发事件的对象，this返回的是绑定事件的对象。

#### 返回事件类型 ####

1.  运行第三段程序结果会返回一个click，是这个事件的类型。

#### 阻止默认事件 ####

1.  在注释掉第四段代码块的时候运行，点击链接会跳转到我的CSDN博客页面，但是在运行第四段程序的时候，点击链接是不会发生跳转的。

--------------------

### 阻止事件冒泡 ###

冒泡事件和阻止冒泡事件博文地址：  
[阻止事件冒泡博文链接][Link 1]

--------------------

### 事件委托（代理、委托） ###

原理：不是每个子节点单独设置事件监听器，而是将事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

作用：只操作了一次DOM，提高了程序的性能。

![在这里插入图片描述][20201126205108430.png_pic_center]

在上面程序的第一段代码中加入上面的语句，点击li则返回li中的内容。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]

[20201126205030561.png_pic_center]: /images/20221120/f1cfc097188049da89b08dbef28a9e68.png
[20201126205044632.png_pic_center]: /images/20221120/ea249075734847ccbb0e112a2535858c.png
[Link 1]: https://blog.csdn.net/weixin_42579348/article/details/110135439
[20201126205108430.png_pic_center]: https://img-blog.csdnimg.cn/20201126205108430.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201126205209166.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA==,size_16,color_FFFFFF,t_70#pic_center