• 有关javascript中事件对象e

    一、简单认识e

    事件对象e，是event的简称。当一个事件被触发时候，这个事件的有关数据都会被存储在一个事件对象e里面，这个对象e有许多固定方法提供给我们查看里面各种数据。

    二、关于e对象的常用属性介绍

     

     1. e.eventPhase查看事件触发所处的阶段

    值为1表示捕获阶段 ；值为2表示目标阶段；值为3表示冒泡阶段

    2.e.target  用来获取触发的事件的元素

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <title>Document</title>
    6.     <style>
    7.         #box1 {
    8.             width: 300px;
    9.             height: 300px;
    10.             background-color: yellowgreen;
    11.         }
    12.  
    13.         #box2 {
    14.             width: 200px;
    15.             height: 200px;
    16.             background-color: pink;
    17.         }
    18.  
    19.         #box3 {
    20.             width: 100px;
    21.             height: 100px;
    22.             background-color: skyblue;
    23.         }
    24.     </style>
    25. </head>
    26.  
    27. <body>
    28.     <div id="box1">box1
    29.         <div id="box2">box2
    30.             <div id="box3">box3</div>
    31.         </div>
    32.     </div>
    33.     <script>
    34.         // 获取元素
    35.         var box1 = document.getElementById("box1");
    36.         var box2 = document.getElementById("box2");
    37.         var box3 = document.getElementById("box3");
    38.  
    39.         // 添加事件
    40.         box1.onclick = function (e) {
    41.             // e指的就是存储事件对象的参数，只要事件被触发（即box1被点击），e就会自动接收数据
    42.             e = e || window.event; // 解决兼容问题
    43.             console.log(e.target);
    44.         };
    45.     </script>
    46. </body>
    47.  
    48. </html>

    页面展示效果

     当点击最外层的盒子时，控制台输出（最外层盒子）

     当点击最里面的box3时，控制台输出：

     

    3.当所有嵌套元素都绑定事件后，执行顺序：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <title>Document</title>
    6.     <style>
    7.         #box1 {
    8.             width: 300px;
    9.             height: 300px;
    10.             background-color: yellowgreen;
    11.         }
    12.  
    13.         #box2 {
    14.             width: 200px;
    15.             height: 200px;
    16.             background-color: pink;
    17.         }
    18.  
    19.         #box3 {
    20.             width: 100px;
    21.             height: 100px;
    22.             background-color: skyblue;
    23.         }
    24.     </style>
    25. </head>
    26.  
    27. <body>
    28.     <div id="box1">box1
    29.         <div id="box2">box2
    30.             <div id="box3">box3</div>
    31.         </div>
    32.     </div>
    33.     <script>
    34.         // 获取元素
    35.         var box1 = document.getElementById("box1");
    36.         var box2 = document.getElementById("box2");
    37.         var box3 = document.getElementById("box3");
    38.  
    39.  
    40.         // /当给所有嵌套元素绑定点击事件时，事件处理函数默认在冒泡阶段执行（即当点击最内层元素时，会从内到外依次触发）
    41.         // 添加事件
    42.         box1.onclick = function (e) {
    43.             // e指的就是存储事件对象的参数，只要事件被触发（即box1被点击），e就会自动接收数据
    44.             e = e || window.event; // 解决兼容问题
    45.             console.log('box1');
    46.         };
    47.         box2.onclick = function (e) {
    48.             // e指的就是存储事件对象的参数，只要事件被触发（即box1被点击），e就会自动接收数据
    49.             e = e || window.event; // 解决兼容问题
    50.             console.log('box2');
    51.         };
    52.         box3.onclick = function (e) {
    53.             // e指的就是存储事件对象的参数，只要事件被触发（即box1被点击），e就会自动接收数据
    54.             e = e || window.event; // 解决兼容问题
    55.             console.log('box3');
    56.         };
    57.     </script>
    58. </body>
    59.  
    60. </html>

    页面展示：

     当点击最内层box3时，控制台会依次输出 box3 box2 box1

    当点击中间的box2时，控制台会依次输出 box2 box1

    4.e.currentTarget用于获取触发事件的源元素

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <title>Document</title>
    6.     <style>
    7.         #box1 {
    8.             width: 300px;
    9.             height: 300px;
    10.             background-color: yellowgreen;
    11.         }
    12.  
    13.         #box2 {
    14.             width: 200px;
    15.             height: 200px;
    16.             background-color: pink;
    17.         }
    18.  
    19.         #box3 {
    20.             width: 100px;
    21.             height: 100px;
    22.             background-color: skyblue;
    23.         }
    24.     </style>
    25. </head>
    26.  
    27. <body>
    28.     <div id="box1">box1
    29.         <div id="box2">box2
    30.             <div id="box3">box3</div>
    31.         </div>
    32.     </div>
    33.     <script>
    34.         // 获取元素
    35.         var box1 = document.getElementById("box1");
    36.         var box2 = document.getElementById("box2");
    37.         var box3 = document.getElementById("box3");
    38.  
    39.         box1.onclick = function (e) {
    40.             // e指的就是存储事件对象的参数，只要事件被触发（即box1被点击），e就会自动接收数据
    41.             e = e || window.event; // 解决兼容问题
    42.             console.log(e.currentTarget);  ///获取触发事件的源元素
    43.  
    44.             // 也就是说，当点击box1，box2，时，也会出书box1元素
    45.             
    46.         };
    47.     </script>
    48. </body>
    49.  
    50. </html>

    上面的代码是只给最外层盒子box1绑定点击事件；

    当我们点击最内层盒子box3，或者中间的盒子box2，e.currentTarget都会输出box1（即最外层盒子）

    5.e.type获取事件类型，取值有click、blur、focus、mousedown、mouseup等等

    6.e.preventDefault( )阻止默认行为

    7.e.stopPropagation()阻止冒泡行为  （注：只有当bubbles为true时可以使用）

    注意：使用addEventListener添加的事件处理程序，只能使用removeEventListener来移除

    格式：

    1. var btn=document.getElementById('myBtn')
    2.  
    3. 添加点击事件
    4. btn.addEventListener("click",handleClick,false)
    5.  
    6. 移除点击事件
    7. btn.removeEventListener("click",handleClick,false)
    8.

    特别注意的是：绑定事件处理函数和移除事件处理函数必须是同一个，否则无效

    1. ///绑定点击事件和移除点击事件的函数必须是同一个，否则无效
    2.  
    3.  
    4. ///！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
    5. ///  下面的移除点击事件无效
    6. var btn=document.getElementById('myBtn')
    7. btn.addEventListener("click",()=>{
    8.         console.log(this.id)
    9.     }
    10. fasle)
    11.  
    12. btn.removeEventListener("click",()=>{
    13.    console.log(this.id)
    14. },false)   无效

  • 相关阅读:
    linux（1.nginx基础 && 2.使用Nginx负载均衡及动静分离）
    Kotlin高仿微信-第36篇-支付-设置金额
    (转)冒泡排序及优化详解
    哪里有比Excel还好用的在线表单制作工具？
    SQL常见题型总结
    [Linux] 如何在 Linux 电脑上制作专业的视频教程
    服装商城网站风险及优势
    动态创建类- ByteBuddy
    21、Java 中接口的基本使用
    Openssl数据安全传输平台009：加密理论基础：哈希/非对称加密RSA/对称加密AES
  • 原文地址：https://blog.csdn.net/qq_44718039/article/details/127868819