js基础教程（第十二堂）--DOM时间

一、DOM0级事件
DOM0级事件指的是在JavaScript早期，只有一种方式来注册事件，即在对象上直接设置事件处理函数，例如：

<button onclick="console.log('点击了按钮')">点击我</button>

这里的onclick就是一个DOM0级事件。

二、DOM2级事件
DOM2级事件指的是在JavaScript后来的版本中，提供了一种新的方式来注册事件，即使用addEventListener()方法，例如：

let btn = document.getElementById('myButton');
btn.addEventListener('click', function() {
  console.log('点击了按钮');
});

这里的addEventListener()就是一个DOM2级事件。与DOM0级事件不同，DOM2级事件可以监听同一事件多次，并且可以通过removeEventListener()方法来移除事件监听器。同时，addEventListener()方法还支持在捕获阶段或冒泡阶段处理事件，以及使用第三个参数来控制事件传递的方式。

三、事件流
JS中的事件流包括三个阶段：

        1、捕获阶段：事件从最外层的文档对象向下传递，直到目标元素的父元素；
        2、目标阶段：事件到达目标元素；
        3、冒泡阶段：事件从目标元素开始向上传递，直到最外层的文档对象。
在事件流的传递过程中，可以通过事件的stopPropagation方法来阻止事件继续传递。另外，在事件处理程序中返回false也可以阻止事件继续传递。

通常情况下，我们主要关注的是目标阶段和冒泡阶段，因为在这两个阶段中，我们可以通过事件监听器来捕获和处理事件。

四、事件委托
事件委托是一种常用的优化前端页面性能的方法。它的原理是利用事件冒泡机制，在父元素上监听某些事件，然后根据事件目标的不同来执行相应的操作，而不是在每个子元素上绑定事件。

事件委托有以下优点：

        1、减少事件绑定的次数，提高页面性能；
        2、可以动态添加或移除子元素，不需要重新绑定事件；
        3、可以解决在循环中绑定事件导致的闭包、内存泄露等问题。
以下是一个事件委托的示例：

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>
 
<script>
  document.getElementById('list').addEventListener('click', function(event) {
    if (event.target.tagName.toLowerCase() === 'li') {
      console.log(event.target.textContent);
    }
  });
</script>

上述代码在 ul 元素上监听了 click 事件，然后根据事件目标的标签名判断是否为 li 元素，如果是，则打印出该元素的文本内容。

五、事件解绑
事件解绑则是将之前绑定的事件从元素上移除，可以通过 removeEventListener() 方法实现。需要注意的是，使用 removeEventListener() 移除事件时，传入的回调函数必须是相同的函数，否则无法移除成功。

以下是一个事件解绑的示例：

<button id="btn">Click me</button>
 
<script>
  function handleClick() {
    console.log('Button clicked');
  }
 
  document.getElementById('btn').addEventListener('click', handleClick);
  
  // 移除事件
  document.getElementById('btn').removeEventListener('click', handleClick);
</script>

六、阻止默认行为 
阻止默认行为是指在特定情况下，浏览器对某个元素的点击或其他事件做出的默认行为可能不是我们所希望的，这时我们可以通过 JavaScript 阻止这种默认行为。例如：

1、阻止链接跳转：

const link = document.querySelector('a');
 
link.addEventListener('click', function(event) {
  event.preventDefault(); // 阻止链接跳转
});

2、阻止表单提交：

const form = document.querySelector('form');
 
form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单提交
});

3、阻止右键菜单：

document.addEventListener('contextmenu', function(event) {
  event.preventDefault(); // 阻止右键菜单
});

七、窗口加载事件 
窗口加载事件是指当一个网页文档加载到浏览器窗口中时所触发的事件。此时，浏览器需要先加载 HTML、CSS、JavaScript 等资源，并且解析这些资源，才能显示网页内容。如果我们需要在网页加载完成后执行一些操作，就可以在窗口加载事件中添加相应的代码。

在 JavaScript 中，可以用以下方式添加窗口加载事件的监听：

window.addEventListener('load', function() {
  // 在这里添加窗口加载后需要执行的代码
});

当窗口加载完成后，浏览器会自动触发 load 事件，并执行相应的回调函数。我们可以在回调函数中编写各种操作，如初始化页面、请求数据、绑定事件等。

八、窗口尺寸事件
在JavaScript中，窗口尺寸事件通常是指当浏览器窗口的大小发生变化时触发的事件。有三种方法可以处理窗口尺寸事件：resize事件、window.onresize方法和addEventListener方法。

1、resize事件：
        当浏览器窗口的大小发生变化时，会自动触发resize事件。可以通过为window对象添加resize事件监听器来处理这个事件。例如：

window.addEventListener('resize', function() {
  console.log('窗口尺寸发生了变化');
});

2、window.onresize方法：
        这是早期浏览器支持的一种方法，用于处理窗口尺寸变化事件。通过将一个函数赋值给window.onresize属性，可以实现与addEventListener相同的功能。例如：

function handleResize() {
  console.log('窗口尺寸发生了变化');
}
 
window.onresize = handleResize;

3、addEventListener方法：
        这是一种更通用的方法，可以用于处理各种类型的事件，包括窗口尺寸事件。通过调用addEventListener方法并传入相应的参数（事件类型和处理函数），可以实现与前两种方法相同的功能。例如：

function handleResize() {
  console.log('窗口尺寸发生了变化');
}

window.addEventListener('resize', handleResize);

 

九、窗口尺寸事件
在JavaScript中，offset、scroll、client都是用来获取元素尺寸或位置的属性。它们之间存在以下的区别：

1、client
client是用来获取元素的大小和位置，不包括元素的边框和滚动条

2、offset
offset是用来获取元素在页面中的位置以及它的大小，包括了元素的边框(border)、内边距(padding)和内容区域(content)

3、scroll
scroll是用来获取元素滚动区域的大小以及滚动条的位置，包括隐藏的内容

十、窗口滚动事件
窗口滚动事件是指当用户在使用鼠标或触摸板滚动页面时，浏览器会检测到滚动事件，并触发相应的事件处理函数。这些事件处理函数可以用来实现各种功能，比如滚动时改变页面的外观或加载更多数据等。

在JavaScript中，可以使用以下代码来监听窗口滚动事件：

window.addEventListener('scroll', function() {
  // 在这里编写滚动事件的处理逻辑
});
其中，scroll是事件的名称，表示窗口滚动事件。当用户滚动页面时，浏览器会自动调用上述的事件处理函数。在该函数中，可以添加自己的处理逻辑，比如：

window.addEventListener('scroll', function() {
  if (window.scrollY > 100) {
    // 当滚动距离超过100像素时，调用某个函数
    myFunction();
  }
});

在这个例子中，如果滚动距离超过100像素，就会调用一个名为myFunction的函数。实际使用中，可以根据具体需求自定义事件处理逻辑。