字数

488 字

阅读时间

3 分钟

![[Pasted image 20240111141413.png]]

![[Pasted image 20240111141214.png]]

![[Pasted image 20240111141251.png]]

![[Pasted image 20240111141331.png]] ![[Pasted image 20240111141533.png]]

![[Pasted image 20240111141906.png]]

![[Pasted image 20240111141910.png]]

![[Pasted image 20240111142139.png]]

给window对象添加onload事件监听。onload表示页面都加载完毕了

![[Pasted image 20240111142256.png]]

事件监听

![[Pasted image 20240111143052.png]]

![[Pasted image 20240111143115.png]]

![[Pasted image 20240111143228.png]] ![[Pasted image 20240111144630.png]]

事件传播

![[Pasted image 20240111155255.png]]

事件对象

前端中的事件对象是由浏览器提供的 Web API。这些事件对象包含了有关事件的信息，比如鼠标点击的位置、键盘按键、触摸事件等。在 JavaScript 中，可以通过事件处理函数来访问这些事件对象，并根据需要对其进行处理。

不同的事件类型（比如鼠标事件、键盘事件、触摸事件等）都有相应的事件对象类型（如 MouseEvent、KeyboardEvent、TouchEvent 等），它们提供了不同类型事件的相关属性和方法，开发者可以利用这些属性和方法来实现各种交互效果。

![[Pasted image 20240111181030.png]]

![[Pasted image 20240511221050.png]]

事件委托

e.target 是指事件对象 event 中的一个属性，表示触发事件的元素。它在事件处理程序中非常常用，用来获取事件是由哪个具体的 DOM 元素触发的。

e.target 的基本用法

当一个事件发生时，浏览器会创建一个事件对象 event，并传递给事件处理函数。e.target 就是这个事件对象中最重要的属性之一，指向发生事件的元素。

例子：

<div id="parent">
  <button id="btn1">Button 1</button>
  <button id="btn2">Button 2</button>
</div>

<script>
  const parent = document.getElementById('parent');

  // 在父元素上添加点击事件处理器
  parent.addEventListener('click', function (e) {
    console.log(e.target); // 输出触发事件的具体元素
    if (e.target.tagName === 'BUTTON') {
      console.log(`Button ${e.target.id} clicked`);
    }
  });
</script>

贡献者

sunchengzhi

文件历史

最后编辑于 大约 2 个月前查看完整历史

de5fa-fix:修改文件名