Webapis Dom事件基础

最新推荐文章于 2024-08-21 23:10:49 发布

dream_of_forget

最新推荐文章于 2024-08-21 23:10:49 发布

阅读量71

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript html css

本文链接：https://blog.csdn.net/dream_of_forget/article/details/126215847

事件

事件是编程语言中的术语，它是用来描述程序的行为或状态的，一旦行为或状态发生改变，便立即调用一个函数。

例如：用户使用【鼠标点击】网页中的一个按钮、用户使用【鼠标拖拽】网页中的一张图片

事件监听

结合 DOM 使用事件时，需要为 DOM 对象添加事件监听，等待事件发生（触发）时，便立即调用一个函数。

什么是事件？

事件是在编程时系统内发生的动作或者发生的事情

比如用户在网页上单击一个按钮

什么是事件监听？

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

比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等

addEventListener 是 DOM 对象专门用来添加事件监听的方法，它的两个参数分别为【事件类型】和【事件回调】。

完成事件监听分成3个步骤：

获取 DOM 元素
通过 addEventListener 方法为 DOM 节点添加事件监听
等待事件触发，如用户点击了某个按钮时便会触发 click 事件类型
事件触发后，相对应的回调函数会被执行

大白话描述：所谓的事件无非就是找个机会（事件触发）调用一个函数（回调函数）。

   <script>
        // 事件注册: dom对象.on事件名 = 处理事件函数
        // 事件注册: dom对象.addEventListener('事件名',事件的处理函数)
        // 事件三要素: 事件源.事件类型(事件名).事件处理函数
        const btn = document.querySelector('button')
        btn.onclick = function () {
            alert('你就是个大傻逼')
        }
        // onclick 点击鼠标
    </script>

事件类型

click 译成中文是【点击】的意思，它的含义是监听（等着）用户鼠标的单击操作，除了【单击】还有【双击】dblclick

【事件类型】决定了事件被触发的方式，如 click 代表鼠标单击，dblclick 代表鼠标双击

    <script>
        // 数据数组
        function get(min, max) {

            return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
        }
        const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
        let id
        let i
        if (id) clearInterval(id)

        document.querySelector('.start').onclick = function () {
            id = setInterval(function () {
                i = get(0, arr.length - 1)
                document.querySelector('.qs').innerHTML = arr[i]
            }, 50)
        }
        
        document.querySelector('.end').onclick = function () {
            clearInterval(id)
            arr.splice(i, 1)
        }

        if (arr.length === 1) {
            document.querySelector('.start').disabled = true
            document.querySelector('.end').disabled = true
        }


        // 1.需求:当用户点击开始按钮时需要从数组里面随机的抽取一个元素出来将抽取的元素显示到class="qs"元素里面
        // 1.1 需要获取到 class="start" dom对象
        // 1.2需要给class="stant" dom对象注册鼠标点击事件
        // 1.3开启定时器
        // 1.4随机从数组里面抽取一个元素
        // 1.5将抽取到元素显示到 class="qs"元素里面
    </script>

事件处理程序

addEventListener 的第2个参数是函数，这个函数会在事件被触发时立即被调用，在这个函数中可以编写任意逻辑的代码，如改变 DOM 文本颜色、文本内容等。

【事件处理程序】决定了事件触发后应该执行的逻辑

<script>
  // 双击事件类型
  btn.addEventListener('dblclick', function () {
    console.log('等待事件被触发...')
    
    const text = document.querySelector('.text')
    // 改变 p 标签的文字颜色
    text.style.color = 'red'
    // 改变 p 标签的文本内容
    text.style.fontSize = '20px'
  })
</script>

事件对象

任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。

<body>
  <h3>事件对象</h3>
  <p>任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。</p>
  <hr>
  <div class="box"></div>
  <script>
    // 获取 .box 元素
    const box = document.querySelector('.box')

    // 添加事件监听
    box.addEventListener('click', function (e) {
      console.log('任意事件类型被触发后，相关信息会以对象形式被记录下来...');

      // 事件回调函数的第1个参数即所谓的事件对象
      console.log(e)
    })
  </script>
</body>

事件回调函数的【第1个参数】即所谓的事件对象，通常习惯性的将这个对数命名为 event、ev 、ev 。

ev.type 当前事件的类型
ev.clientX/Y 光标相对浏览器窗口的位置
ev.offsetX/Y 光标相于当前 DOM 元素的位置

注：在事件回调函数内部通过 window.event 同样可以获取事件对象

环境对象

环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境。

环境对象：指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境

作用：弄清楚this的指向，可以让我们代码更简洁

this 本质上是一个变量，数据类型为对象

函数的调用方式不同，this 指代的对象也不同

【谁调用， this 就是谁】是判断 this 指向的粗略规则

直接调用函数，其实相当于是 window.函数，所以 this 指代 window

  // 声明函数
  function sayHi() {
    // this 是一个变量
    console.log(this);
  }

  // 声明一个对象
  let user = {
    name: '张三',
    sayHi: sayHi // 此处把 sayHi 函数，赋值给 sayHi 属性
  }
  
  let person = {
    name: '李四',
    sayHi: sayHi
  }

  // 直接调用
  sayHi() // window
  window.sayHi() // window

  // 做为对象方法调用
  user.sayHi()// user
	person.sayHi()// person
</script>

回调函数

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数。

回调函数

➢ 把函数当做另外一个函数的参数传递，这个函数就叫回调函数

➢ 回调函数本质还是函数，只不过把它当成参数使用

➢ 使用匿名函数做为回调函数比较常见

<script>
  // 调用定时器，匿名函数做为参数
  setInterval(function () {
    console.log('我是回调函数...');
  }, 1000);
</script>