【JavaScript】事件监听、事件委托和回调函数

小秀_heo

已于 2023-11-05 19:33:43 修改

阅读量894

点赞数 1

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

于 2023-11-05 17:23:26 首次发布

本文链接：https://blog.csdn.net/XiugongHao/article/details/134232197

版权

JavaScript 专栏收录该内容

108 篇文章 1 订阅

订阅专栏

1. 事件监听

on 方法：box.onclick = function(){}，但是这种方式会被覆盖，直接使用null覆盖偶就可以实现事件的解绑。

addEventListener 是 DOM 对象专门用来添加事件监听的方法，它的前两个参数分别为【事件类型】和【事件回调】，addEventListener 第3个参数为 true 表示捕获阶段触发，false 表示冒泡阶段触发，默认值为 false。

使用removeEventListener解绑，匿名函数无法解绑。

e.stopPropagation() 写在子元素触发回调函数内部，阻止事件冒泡。e.preventDefault() 阻止链接或者表单域的默认跳转。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件监听</title>
</head>
<body>
  <h3>事件监听</h3>
  <p id="text">为 DOM 元素添加事件监听，等待事件发生，便立即执行一个函数。</p>
  <button id="btn">点击改变文字颜色</button>
  <script>
    // 1. 获取 button 对应的 DOM 对象
    const btn = document.querySelector('#btn')

    // 2. 添加事件监听
    btn.addEventListener('click', function () {
      console.log('等待事件被触发...')
      // 改变 p 标签的文字颜色
      let text = document.getElementById('text')
      text.style.color = 'red'
    })

    // 3. 只要用户点击了按钮，事件便触发了！！！
  </script>
</body>
</html>

1.1 鼠标事件

click 代表鼠标单击，dblclick 代表鼠标双击。

mouseenter 监听鼠标是否移入 DOM 元素

<body>
  <h3>鼠标事件</h3>
  <p>监听与鼠标相关的操作</p>
  <hr>
  <div class="box"></div>
  <script>
    // 需要事件监听的 DOM 元素
    const box = document.querySelector('.box');

    // 监听鼠标是移入当前 DOM 元素
    box.addEventListener('mouseenter', function () {
      // 修改文本内容
      this.innerText = '鼠标移入了...';
      // 修改光标的风格
      this.style.cursor = 'move';
    })
  </script>
</body>

mouseleave 监听鼠标是否移出 DOM 元素

<body>
  <h3>鼠标事件</h3>
  <p>监听与鼠标相关的操作</p>
  <hr>
  <div class="box"></div>
  <script>
    // 需要事件监听的 DOM 元素
    const box = document.querySelector('.box');

    // 监听鼠标是移出当前 DOM 元素
    box.addEventListener('mouseleave', function () {
      // 修改文本内容
      this.innerText = '鼠标移出了...';
    })
  </script>
</body>

mouseover 和 mouseout 会有冒泡效果。

mouseenter 和 mouseleave 没有冒泡效果 (推荐)。

1.2 键盘事件

keydown 键盘按下触发

keyup 键盘抬起触发

1.3 焦点事件

focus 获得焦点

blur 失去焦点

1.4 文本框输入事件

input ：在文本框中输入、删除或粘贴内容时，该事件会触发

change：给文本框注册change事件，文本框的值发生变化并且失去焦点时触发

1.5 其他事件

load：监听页面所有资源加载完毕（window.addEventListener）。

scroll：监听滚动条在滚动时持续出发的事件（window.addEventListener）。

resize：页面尺寸发生变化时触发事件（window.addEventListener）。

2. 事件对象

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

<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、e 。

e.type 当前事件的类型
e.clientX/Y 光标相对浏览器窗口的位置
e.offsetX/Y 光标相于当前 DOM 元素的位置
e.scrollTop 获取被卷去的大小

注：
5. 在事件回调函数内部通过 window.event 同样可以获取事件对象
6. key 键盘按键值

3. 事件委托

自己不注册事件，将对应的事件注册给祖先元素，减少事件的注册，提高效率。

大量的事件监听是比较耗费性能的，如下代码所示

<script>
  // 假设页面中有 10000 个 button 元素
  const buttons = document.querySelectorAll('table button');

  for(let i = 0; i <= buttons.length; i++) {
    // 为 10000 个 button 元素添加了事件
    buttons.addEventListener('click', function () {
      // 省略具体执行逻辑...
    })
  }
</script>

利用事件流的特征，事件的的冒泡模式总是会将事件流向其父元素的，如果父元素监听了相同的事件类型，那么父元素的事件就会被触发并执行，正是利用这一特征对上述代码进行优化，如下代码所示：

<script>
  // 假设页面中有 10000 个 button 元素
  let buttons = document.querySelectorAll('table button');
  
  // 假设上述的 10000 个 buttom 元素共同的祖先元素是 table
  let parents = document.querySelector('table');
  parents.addEventListener('click', function () {
    console.log('点击任意子元素都会触发事件...');
  })
</script>

如果只是点击 button 子元素才会触发，那么加一个判断if(e.target.tagName === 'BUTTON')。

3. 环境对象

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

<script>
  // 声明函数
  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>

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

4. 回调函数

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

<script>
  // 声明 foo 函数
  function foo(arg) {
    console.log(arg);
  }

  // 普通的值做为参数
  foo(10);
  foo('hello world!');
  foo(['html', 'css', 'javascript']);

  function bar() {
    console.log('函数也能当参数...');
  }
  // 函数也可以做为参数！！！！
  foo(bar);
</script>

函数 bar 做参数传给了 foo 函数，bar 就是所谓的回调函数。

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

小秀_heo

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JavaScript】事件监听、事件委托和回调函数

是 DOM 对象专门用来添加事件监听的方法，它的两个参数分别为【事件类型】和【事件回调】。任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。事件回调函数的【第1个参数】即所谓的事件对象，通常习惯性的将这个对数命名为。如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数。// 3. 只要用户点击了按钮，事件便触发了！// 事件回调函数的第1个参数即所谓的事件对象。// 调用定时器，匿名函数做为参数。// 函数也可以做为参数！
复制链接

扫一扫