JavaScript 06 DOM-事件初步

初映CY的前说

已于 2023-01-30 13:30:31 修改

阅读量243

点赞数 2

分类专栏： javaScript 文章标签： javascript 前端 html html5 css3

于 2022-12-01 21:32:10 首次发布

本文链接：https://blog.csdn.net/m0_61118311/article/details/128137456

版权

javaScript 专栏收录该内容

17 篇文章 6 订阅

订阅专栏

🥳博主：初映CY的前说(前端领域)

🌞个人信条：想要变成得到，中间还有做到！

🤘本文核心：事件监听、常见事件（焦点鼠标输入等事件）

一、事件监听是什么？

让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件

比如点击网页，鼠标经过...

1.1事件监听三要素

事件源：那个dom元素被事件触发了，要获取dom元素
事件类型：用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
事件处理的函数：要做什么事一般是一个匿名函数函数

1.2事件监听的两种方法：

①dom对象.on事件类型 = 事件处理函数

（不推荐这种写法）

②推荐用注册事件.addEventListener写法

效果与第一个一样的

注意点：

事件类型需要用括号括起来
选择器需要加上类. 或者标签# 整体用货号括起来
.addEventListener不需要加on

来个例子感受下-关闭广告

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      position: relative;
      width: 1000px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
      text-align: center;
      font-size: 50px;
      line-height: 200px;
      font-weight: 700;
    }

    .close {
      position: absolute;
      right: 20px;
      top: 10px;
      width: 20px;
      height: 20px;
      background-color: skyblue;
      text-align: center;
      line-height: 20px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="box">
    我是广告
    <div class="close">X</div>
  </div>
  <script>

    const cl = document.querySelector('.close')
    const box = document.querySelector('.box')

      // 注意属性值需要  加上style，值用‘’包括起来                                                                                                                                                                ‘’
    cl.addEventListener('click', function () {
      box.style.display = 'none'
    })
  </script>
</body>

</html>

二、鼠标事件

有两组为（没什么区别，后篇文章讲冒泡的时候再说）：

mouseenter 鼠标经过 mouseleave 鼠标离开

mouseover 鼠标经过 mouseout鼠标离开

三、键盘事件

有两个

keydown按下

keyup抬起

四、焦点事件

有两个

focus 获取焦点
blur 失去焦点

焦点事件长跟表单元素一起使用

五、事件对象

什么是事件对象？

事件对象是个对象，这个对象里保存事件触发时的相关信息

例如：鼠标点击事件中，事件对象就保存了鼠标点击的坐标值


// 事件对象：一般命名为event、ev、e 
事件源.addEventListener('事件类型', function(事件对象) {
  console.log(事件对象)
})


// 形参 e 就是事件对象
document.querySelector('.btn').addEventListener('click', function(e){
})
document.addEventListener('mousemove', function(e){
    
})