zoukankan      html  css  js  c++  java
  • DOM事件对象

    DOM事件对象

    div.onclick =  function(event){.......}

    小括号中的event就是事件对象

    (1)事件对象是系统给我们自动创建的,我们只需要在小括号中声明一下就可以了,并且可以自主命名,如event,evt,e都可以

    (2)事件对象是和我们创建的事件相关的一系列数据的集合

    比如鼠标点击事件中,事件对象包含了鼠标的相关信息,如鼠标的坐标

    常见的事件对象的属性以及方法

    (1)e.target  //返回触发事件的对象

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>Document</title>
     7     <style>
     8         .d1{
     9             width: 200px;
    10             height: 200px;
    11             background-color: thistle;
    12         }
    13     </style>
    14 </head>
    15 <body>
    16     <div>
    17         <button >this</button>
    18     </div>
    19 
    20     <script>
    21         var btn = document.querySelector("button");
    22         var div = document.querySelector("div");
    23 
    24         btn.addEventListener("click",function(e){
    25             //e.target  返回触发事件的对象
    26             console.log(e.target);
    27             
    28             div.className = "d1";
    29         })
    30     </script>
    31 </body>
    32 </html>

     (2)e.type //返回事件的类型

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>Document</title>
     7     <style>
     8         .d1{
     9             width: 200px;
    10             height: 200px;
    11             background-color: thistle;
    12         }
    13     </style>
    14 </head>
    15 <body>
    16     <div>
    17         <button >this</button>
    18     </div>
    19 
    20     <script>
    21         var btn = document.querySelector("button");
    22         var div = document.querySelector("div");
    23 
    24         btn.addEventListener("click",function(e){
    25             //e.type  返回触发事件的类型
    26             console.log(e.type);
    27             
    28             div.className = "d1";
    29         })
    30     </script>
    31 </body>
    32 </html>

     (3)e.preventDedault()  //阻止默认行为,比如点击链接后不跳转

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>Document</title>
     7 </head>
     8 <body>
     9     <a href="https://www.baidu.com">百度</a>
    10 
    11     <script>
    12         var a = document.querySelector("a");
    13         a.addEventListener("click",function(e){
    14 
    15             //e.preventDefault();  阻止默认行为
    16             e.preventDefault();
    17         })
    18     </script>
    19 </body>
    20 </html>
  • 相关阅读:
    【XSY2990】树 组合数学 容斥
    【LOJ2542】【PKUWC 2018】随机游走 min-max容斥 树上高斯消元
    【51NOD1847】奇怪的数学题 min_25筛
    【51NOD1965】奇怪的式子 min_25筛
    蒟蒻的学习计划
    【XSY2962】作业 数学
    蒟蒻的做题记录
    【LOJ2586】【APIO2018】选圆圈 CDQ分治 扫描线 平衡树
    【APIO2016】【UOJ205】【LOJ2568】烟花表演 可合并堆
    【BZOJ2876】【Noi2012】骑行川藏 拉格朗日乘法
  • 原文地址:https://www.cnblogs.com/zysfx/p/12781773.html
Copyright © 2011-2022 走看看