DOM 事件基础

事件

事件监听（绑定）

  1. 什么是事件监听？

    • 就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件。
    • 元素对象.addEventListener("事件类型", 要执行的函数);

  2. 事件监听三要素是什么？

    • 事件源 (谁被触发了)
    • 事件类型 (用什么方式触发，点击还是鼠标经过等)
    • 事件处理程序（要做什么事情）

事件监听

元素对象.addEventListener("事件类型", 要执行的函数);

完成事件监听步骤

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

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

事件监听三要素

<button id="myButton">Click me</button>

<script>
  const button = document.querySelector("#myButton");
  // 使用了 addEventListener() 方法来将一个点击事件监听器添加到按钮上。
  // 当用户点击按钮时，会触发回调函数中的代码，输出 "Button clicked!" 到控制台。
  button.addEventListener("click", function () {
    console.log("Button clicked!");
  });
</script>
注意

  1. 事件类型要加引号。
  2. 函数是点击之后再去执行，每次点击都会执行一次。

事件监听版本

事件类型

事件类型指的是用户与网页交互时所触发的事件，如鼠标点击、键盘按键、窗口大小改变等。

鼠标事件

鼠标事件是指用户在网页上使用鼠标进行交互时所触发的事件。常见的鼠标事件有以下几种：

对于以上鼠标事件，可以通过 addEventListener 方法来为元素添加事件监听器。

const element = document.getElementById("myElement");
element.addEventListener("click", function () {
  console.log("clicked");
});

在事件监听器中，可以通过 event 对象来获取事件的相关信息。在事件处理程序中，可以访问事件对象，该对象提供与事件相关的信息，例如鼠标位置和按钮状态。

element.addEventListener("mousemove", function (event) {
  console.log("mouse X:", event.clientX);
  console.log("mouse Y:", event.clientY);
});

有时需要在鼠标事件中取消默认行为，例如防止上下文菜单的出现。可以通过在事件处理程序中调用 event.preventDefault() 方法来实现。

element.addEventListener("contextmenu", function (event) {
  event.preventDefault();
});

通过使用鼠标事件，可以实现各种交互效果，例如拖拽、点击、菜单等。

键盘事件

键盘事件是指用户在键盘上按下或释放按键时触发的事件。常用的键盘事件包括键盘按下事件（keydown）、键盘释放事件（keyup）和键盘输入事件（keypress）。

对于以上键盘事件，可以使用 addEventListener() 方法来为元素添加键盘事件监听器。

// 使用 addEventListener() 方法为 document 元素添加了三个键盘事件监听器，分别对应键盘按下、键盘释放和键盘输入事件
// 在事件处理函数中，可以通过 event 对象获取键盘事件的相关信息，如按下的键位、按键码等
document.addEventListener("keydown", function (event) {
  console.log("键盘按下：" + event.key);
});

document.addEventListener("keyup", function (event) {
  console.log("键盘释放：" + event.key);
});

document.addEventListener("keypress", function (event) {
  console.log("键盘输入：" + event.key);
});

焦点事件

焦点事件是指与 HTML 文档中的焦点相关的事件。焦点是指当前被选中的元素，可以通过鼠标或键盘来改变焦点。常见的焦点事件包括：

这些事件可以用于实现一些交互功能，例如在输入框获得焦点时自动弹出键盘，或者在表单提交前检查输入框是否为空等。

// <input type="text">

// 获取输入框元素
const input = document.querySelector("input");

// 绑定 focus 事件
input.addEventListener("focus", function () {
  console.log("输入框获得焦点");
});

// 绑定 blur 事件
input.addEventListener("blur", function () {
  console.log("输入框失去焦点");
});

文本事件

文本事件是指在 HTML 文本元素（如文本框、文本域等）中发生的事件，这些事件可以被 JavaScript 监听和处理。常见的文本事件包括：

这些事件可以通过 JavaScript 监听和处理，以实现一些交互效果，例如实时搜索、实时校验输入内容等。

// <input type="text" id="myInput">

const inputElement = document.getElementById("myInput");

// 使用 addEventListener 方法来监听 input 事件
// 当用户在 input 元素中输入或粘贴文本时，会触发该事件，并执行绑定的回调函数
inputElement.addEventListener("input", function (event) {
  // 获取 event.target.value 属性来获取用户输入的文本内容，然后进行相应的处理
  console.log("Input value changed:", event.target.value);
});

表单事件

表单事件是指在表单元素上发生的事件，如用户在输入框中输入字符、提交表单等操作。在 JavaScript 中，可以使用事件监听器来捕捉这些事件并执行相应的操作。

常见的表单事件包括：

除了以上常见的表单事件，还有一些其他的事件，如 onload、onunload 等。在使用表单事件时，需要注意事件的兼容性和浏览器的差异性，以确保代码在各种浏览器中都能正常运行。

事件对象

  1. 事件对象是什么？

    • 也是个对象，这个对象里有事件触发时的相关信息

  2. 事件对象在哪里？

    • 在事件绑定的回调函数的第一个参数就是事件对象
    元素.addEventListener("click", function (e) {}

获取事件对象

// 获取 .box 元素
const box = document.querySelector(".box");

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

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

事件对象常用属性

key 和 keyCode

  1. event.key 属性

    该属性是表示键盘事件对应的实际字符值。对于字母和数字键，它返回字符本身，对于符号键，它返回对应的符号，例如 event.key 可以返回 "a"，"B"，"1"，"!"，"$" 等等。

    此外，event.key 还可以返回一些特殊键的名称，例如 "Enter"、"ArrowUp"、"Escape" 等等。这个属性值不受键盘布局或其他设置的影响，可以方便地处理各种不同的键盘输入。

    document.addEventListener("keydown", (event) => {
  console.log(`按下了键：${event.key}`);
});

  2. event.keyCode 属性：

    该属性是表示键盘事件对应的键码值。键码值是一个整数，代表了按下的键在键盘上的位置和编号。不同的键盘布局可能会导致不同的键码值，例如数字键盘和常规键盘的键码值可能不同。

    event.keyCode 在过去被广泛使用，但现在已被逐渐废弃。因为它在不同的浏览器和设备上有不同的表现，而且不支持非 ASCII 字符。

    document.addEventListener("keydown", (event) => {
  console.log(`按下的键码值：${event.keyCode}`);
});

总结，event.key 是更好的选择，因为它提供了一个更具语义的方式来表示按下的键。而 event.keyCode 作为一个历史遗留属性，已经不被推荐使用。

环境对象

  1. 环境对象 this 是什么？
    • 它代表着当前函数运行时所处的环境
  2. 判断 this 指向的粗略规则是什么？
    • 【谁调用，this 就是谁】

JavaScript 中的环境对象 this 是指当前函数执行的上下文。每个函数都有一个关联的 this 值，它在函数内部使用时表示当前函数所在的上下文对象。this 值可以是全局对象、当前函数所属的对象或者是一个新对象。

当函数被调用时，会自动创建一个 this 上下文对象，这个上下文对象绑定到函数的执行过程中。this 值的实际值取决于函数的调用方式和执行环境。

  1. 全局上下文中的 this：在全局上下文中，this 指向全局对象 window。在浏览器环境中，它是 window 对象；在 Node.js 环境中，它是 global 对象。
  2. 方法中的 this：在一个对象上调用一个方法时，方法内部的 this 值指向当前对象。例如，假设有一个名为 person 的对象，其中有一个名为 name 的方法，则在该方法中调用 this 将返回 person 对象。
  3. 构造函数中的 this：构造函数的 this 指向正在被构造的实例对象。
  4. 通过 call() 或 apply() 方法调用的函数中的 this：call() 和 apply() 方法能够让一个非 this 上下文的函数以某个对象的上下文来执行。在调用函数时，可以传递一个对象作为 call() 或 apply() 方法的参数，以代替函数内部的 this。

综上所述，this 的值是在函数被调用时动态确定的。在编写代码时，要准确理解函数被调用时的上下文，并正确使用 this 值。

在全局作用域中，this 指向全局对象，对于浏览器中的 JavaScript，这个全局对象是 window。在函数内部，this 的值取决于函数被调用的方式。以下是 this 的一些常见用法和值：

  1. 函数作为全局函数被调用时，this 指向全局对象。

    function myFunction() {
  console.log(this); // window
}

myFunction();

  2. 函数作为某个对象的方法被调用时，this 指向该对象。

    const myObj = {
  myMethod() {
    console.log(this);
  },
};

myObj.myMethod(); // myObj

  3. 使用 call 或 apply 方法调用函数时，第一个参数指定 this 的值。

    function myFunction() {
  console.log(this);
}

const myObj = {name: "John"};

myFunction.call(myObj); // myObj

  4. 当使用箭头函数时，this 指向箭头函数定义时的上下文，而不是运行时的上下文。

    const myObj = {
  myMethod() {
    const myArrowFunc = () => {
      console.log(this);
    };
    myArrowFunc();
  },
};

myObj.myMethod(); // myObj

回调函数

  1. 回调函数
    • 把函数当做另外一个函数的参数传递，这个函数就叫回调函数
    • 回调函数本质还是函数，只不过把它当成参数使用
    • 使用匿名函数做为回调函数比较常见

在 JS 中，每个函数都是一个对象，并且可以作为参数传递给其他函数，这就为回调函数的实现提供了基础。

function foo(callback) {
  // do something...
  callback();
}

function bar() {
  console.log("Hello World");
}

// 函数 bar() 作为回调函数，在函数 foo() 中被当做参数传递
// 当 foo() 执行完之后，会自动调用 bar() 函数
foo(bar); // 输出：Hello World

回调函数不仅可以被用于简单的异步操作，还可以在函数中使用条件语句来判断是否执行回调函数。

// add() 函数中判断了传入的参数 callback 是否为函数，如果是则调用回调函数并将结果传递给它
function add(num1, num2, callback) {
  let sum = num1 + num2;
  if (typeof callback === "function") {
    callback(sum);
  }
}

add(1, 2, function (result) {
  console.log("The result is " + result);
}); // 输出：The result is 3

// fetchData 函数模拟了从服务器获取数据的过程，它在 2 秒后返回一个对象
function fetchData(callback) {
  setTimeout(function () {
    const data = {name: "John", age: 30};
    callback(data);
  }, 2000);
}

function processData(data) {
  console.log("Name:", data.name);
  console.log("Age:", data.age);
}

// 将 processData 函数作为参数传递给 fetchData 函数，这就是回调函数
// 在 fetchData 函数完成后，它将调用回调函数并将获取到的数据作为参数传递给它
fetchData(processData);

当用户单击按钮时，可以使用回调函数来处理该事件。

const button = document.querySelector("button");

// 将一个匿名函数作为回调函数传递给 addEventListener 函数，以便在用户单击按钮时调用该函数
button.addEventListener("click", function () {
  console.log("Button clicked");
});

综合案例 - Tab 栏切换

作业

点击随机显示图片

同意协议作业

验证码倒计时

显示隐藏密码

小米密码框

手风琴效果