第十一讲_JavaScript文档对象模型DOM(二)

JavaScript文档对象模型DOM(二)

  • 1. 事件是什么
  • 2. 事件类型
  • 3. 添加和移除事件处理器
  • 4. 事件对象
    • 4.1 事件对象的常用属性
  • 5. 事件流
    • 5.1 阻止默认行为
    • 5.2 事件冒泡

1. 事件是什么

事件是发生在编程的系统中的事情,当事件发生时,系统产生某种信号,并提供一种机制,可以自动采取某种行动(即运行一些代码)。

为了对一个事件做出反应,需要添加一个事件处理器。这是一个代码块,在事件发生时运行。当这样一个代码块被定义为响应一个事件而运行时,称为注册一个事件处理器。(事件处理器也被叫做事件监听器)

2. 事件类型

  • 鼠标事件:

    • click:鼠标点击事件
    • mouseenter:鼠标进入事件
    • mouseleave:鼠标移出事件
  • 焦点事件:

    • focus:获得焦点事件
    • blur:失去焦点事件
  • 键盘事件

    • keydown:键按下事件
    • keyup:键松开事件
  • 输入事件

    • input:输入事件
  • 页面加载事件:

    • load:页面加载事件
  • 页面滚动事件:

    • scroll:页面滚动事件
  • 页面尺寸事件:

    • resize:页面尺寸事件

3. 添加和移除事件处理器

  • addEventListener():添加事件处理器
  • removeEventListener():移除事件处理器
<html>

  <style>
    .parent {
      height: 100px;
      width: 100px;
      background-color: red;
    }
  </style>

  <div class="parent"></div>

  <script>
    const div = document.querySelector('div');
    // 添加点击事件
    div.addEventListener("click", () => {
      alert("hello")
    });
  </script>
  
</html>
<html>

  <style>
    .parent {
      height: 100px;
      width: 100px;
      background-color: red;
    }
  </style>

  <div class="parent"></div>

  <script>
    function clickHandle() {
      alert("hello")
    }
    const div = document.querySelector('div');
    // 添加点击事件
    div.addEventListener("click", clickHandle);
    // 移除点击事件
    div.removeEventListener("click", clickHandle);
  </script>
  
</html>

4. 事件对象

在事件处理函数内部,系统会自动传入一个事件对象参数,以提供额外的功能和信息。例如:下面代码中,clickHandle处理器函数的event参数就是事件对象

<html>

  <style>
    .parent {
      height: 100px;
      width: 100px;
      background-color: red;
    }
  </style>

  <div class="parent"></div>

  <script>
    // event 就是事件对象
    function clickHandle(event) {
      alert("hello")
    }
    const div = document.querySelector('div');
    // 添加点击事件
    div.addEventListener("click", clickHandle);
  </script>
  
</html>

4.1 事件对象的常用属性

  • type:事件的类型
  • clientX/ClientY:获取光标相对于浏览器可见窗口的位置
  • offsetX/offsetY:获取光标相对于 DOM 元素的位置
  • key:键盘按下的键
  • target:触发的元素

5. 事件流

事件流指的是事件完整执行过程中的流动路径。

事件流的三个阶段:

  1. 捕获阶段:事件流的第一个阶段,从根节点开始向下传播到目标元素。 可以使用 addEventListener 的第三个参数指定事件处理程序在捕获阶段中执行。
  2. 目标阶段:事件流的第二个阶段,事件到达目标元素后被触发执行事件处理程序。
  3. 冒泡阶段:事件流的最后一个阶段,事件从目标元素开始向上冒泡,依次经过每个父元素,直到达到根节点。可以使用 addEventListener 的第三个参数设置为 false 或省略来指定事件处理程序在冒泡阶段中执行。

5.1 阻止默认行为

有时会遇到一些情况,希望事件不执行它的默认行为。可以通过preventDefault()方法阻止元素的默认行为。

<html>

  <a href="http://www.baidu.com">百度</a>

  <script>
    const a = document.querySelector('a');
    // 添加点击事件
    a.addEventListener("click", (event) => {
      // 阻止默认行为
      event.preventDefault();
    });
  </script>
  
</html>

5.2 事件冒泡

事件冒泡描述了浏览器处理嵌套元素事件的方式,从嵌套最深处往外冒。

例如:下面代码示例,当你点击grandson区域时,依次弹出grandsonchildparent的警告框;当你点击child区域时,依次弹出childparent的警告框;当你点击parent区域,只弹出parent的警告框。

<html>

  <style>
    .parent {
      height: 500px;
      width: 500px;
      background-color: red;
    }

    .child {
      height: 200px;
      width: 200px;
      background-color: blue;
    }

    .grandson {
      height: 100px;
      width: 100px;
      background-color: aqua;
    }
  style>


  <div class="parent">
    <div class="child">
      <div class="grandson">div>
    div>
  div>

  <script>
    const parent = document.querySelector('.parent');
    const child = document.querySelector('.child');
    const grandson = document.querySelector('.grandson');

    // 添加点击事件
    parent.addEventListener("click", (event) => {
      alert('我是parent')
    });
    child.addEventListener("click", (event) => {
      alert('我是child')
    });
    grandson.addEventListener("click", (event) => {
      alert('我是grandson')
    });
  script>
  
html>

有时候,我们不想点击grandson区域时,弹出childparent的警告框。这时我们可以用stopPropagation()阻断事件的流动传播。

    <html>
      <style>
        .parent {
          height: 500px;
          width: 500px;
          background-color: red;
        }

        .child {
          height: 200px;
          width: 200px;
          background-color: blue;
        }

        .grandson {
          height: 100px;
          width: 100px;
          background-color: aqua;
        }
      style>


      <div class="parent">
        <div class="child">
          <div class="grandson">div>
        div>
      div>

      <script>
        const parent = document.querySelector('.parent');
        const child = document.querySelector('.child');
        const grandson = document.querySelector('.grandson');

        parent.addEventListener("click", (event) => {
          alert('我是parent')
        });
        child.addEventListener("click", (event) => {
          alert('我是child')
        });
        grandson.addEventListener("click", (event) => {
          alert('我是grandson')
          // 阻断事件的流动传播
          event.stopPropagation();
        });
      script>
      
    html>

你可能感兴趣的:(JavaScript,javascript,前端,开发语言)