✊不积跬步，无以至千里；不积小流，无以成江海。

click、dblclick、mousedown、mouseup、contextmenu

JavaScript中的click、dblclick、mousedown、mouseup和contextmenu都是鼠标事件。它们分别对应于鼠标单击、双击、按下、释放和打开上下文菜单。

click事件在用户单击元素时触发。单击是指用户按下鼠标按钮，然后将其释放，而没有移动鼠标指针。

dblclick事件在用户双击元素时触发。双击是指用户在短时间内连续单击元素两次。

mousedown事件在用户按下鼠标按钮时触发，而不管鼠标指针的位置。

mouseup事件在用户释放鼠标按钮时触发，而不管鼠标指针的位置。

contextmenu事件在用户尝试打开元素的上下文菜单时触发。上下文菜单通常是通过右键单击元素来打开的。

以下是一个简单的示例，说明如何使用这些事件：

const element = document.querySelector('#element');

element.addEventListener('click', () => {
  // 处理单击事件
});

element.addEventListener('dblclick', () => {
  // 处理双击事件
});

element.addEventListener('mousedown', () => {
  // 处理鼠标按下事件
});

element.addEventListener('mouseup', () => {
  // 处理鼠标释放事件
});

element.addEventListener('contextmenu', () => {
  // 处理上下文菜单事件
});

mouseenter和mouseleave

mouseenter和mouseleave是JavaScript中的鼠标事件，分别对应于鼠标指针进入和离开元素。

mouseenter事件在鼠标指针进入元素时触发。进入是指鼠标指针移动到元素的边界内，而不管鼠标按钮是否被按下。

mouseleave事件在鼠标指针离开元素时触发。离开是指鼠标指针移动到元素的边界外，而不管鼠标按钮是否被按下。

这两个事件通常用于实现交互式效果，例如在鼠标指针进入元素时显示边框，或者在鼠标指针离开元素时隐藏菜单。

以下是一个简单的示例，说明如何使用mouseenter和mouseleave事件：

const element = document.querySelector('#element');

element.addEventListener('mouseenter', () => {
  // 处理鼠标指针进入元素事件
});

element.addEventListener('mouseleave', () => {
  // 处理鼠标指针离开元素事件
});

可以根据需要使用这两个事件来处理用户与元素的交互。例如，希望使用mouseenter事件来在鼠标指针进入元素时显示边框，或者使用mouseleave事件来在鼠标指针离开元素时隐藏菜单。

请注意，mouseenter和mouseleave事件类似于mouseover和mouseout事件，但存在一些细微的差别。mouseover和mouseout事件在鼠标指针进入或离开元素及其子元素时触发，而mouseenter和mouseleave事件仅在鼠标指针进入或离开元素本身时触发。

keyup、keydown

keyup和keydown是JavaScript中的键盘事件，分别对应于键盘按键被释放和按下的事件。

keyup事件在用户释放键盘按键时触发。释放是指用户抬起手指离开按键。

keydown事件在用户按下键盘按键时触发。按下是指用户将手指按在按键上。

这两个事件通常用于实现键盘快捷键，例如在用户按下Ctrl+S键时保存文档，或在用户按下Ctrl+F键时打开搜索框。

以下是一个简单的示例，说明如何使用keyup和keydown事件：

document.addEventListener('keyup', (event) => {
  // 处理键盘按键被释放事件
  if (event.keyCode === 83 && event.ctrlKey) {
    // 保存文档
  }
});

document.addEventListener('keydown', (event) => {
  // 处理键盘按键被按下事件
  if (event.keyCode === 70 && event.ctrlKey) {
    // 打开搜索框
  }
});

请注意，keyup和keydown事件类似于keypress事件，但存在一些细微的差别。keypress事件在用户按下键盘按键并输入字符时触发，而keyup和keydown事件仅在用户按下或释放键盘按键时触发。

实战：实现一个安全键盘

一个安全键盘是一种虚拟键盘，它可以用来输入密码或其他敏感信息。安全键盘通常会打乱按键的位置，并使用遮罩来隐藏用户输入的字符。这可以防止键盘记录器等恶意软件窃取用户的密码或其他敏感信息。

以下是一个用JavaScript实现安全键盘的实战：

// 创建一个安全键盘
const keyboard = document.createElement('div');
keyboard.classList.add('keyboard');

// 创建按键
const keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '[', ']', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';', '\'', 'z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '/'];
for (const key of keys) {
  const button = document.createElement('button');
  button.innerHTML = key;
  //将 `key` 类添加到 `button` 元素的类列表中。类列表用于存储元素的类
  button.classList.add('key'); 
  //将 `button` 元素添加到 `keyboard` 元素的子元素列表中。子元素列表用于存储元素的子元素。
  keyboard.appendChild(button); 
}

// 打乱按键的位置
const random = new Random();
for (let i = 0; i < keys.length; i++) {
  //将 `keys` 数组中的第 `i` 个元素赋值给 `key` 变量。
  const key = keys[i];
  
  //将随机生成一个介于 0 和 `keys` 数组长度之间的整数，并将其赋值给 `index` 变量。
  const index = random.nextInt(keys.length);
  
  //将 `keys` 数组中的第 `index` 个元素赋值给 `temp` 变量。
  const temp = keys[index];
  
  //将 `key` 变量的值赋给 `keys` 数组中的第 `index` 个元素。
  keys[index] = key;
  
  //将 `temp` 变量的值赋给 `keys` 数组中的第 `i` 个元素。
  keys[i] = temp;
}

// 为按键绑定事件
for (const button of keyboard.querySelectorAll('.key')) {
  button.addEventListener('click', () => {
    // 获取按键的文本
    const text = button.textContent;

    // 将按键的文本添加到遮罩
    //将 `.mask` 类的元素搜索到，并将其赋值给 `mask` 变量。
    const mask = document.querySelector('.mask');
    
    //将 `text` 字符串添加到 `mask` 元素的 `textContent` 属性中。`textContent` 属性用于设置或返回元素的文本内容。
    //`mask` 元素是用于隐藏用户输入的遮罩。`text` 字符串是用户输入的每个字符。
    mask.textContent += text;
  });
}

// 添加到页面
document.body.appendChild(keyboard);

// 创建遮罩
const mask = document.createElement('input');
mask.type = 'text';
mask.style.display = 'none';
document.body.appendChild(mask);

这个安全键盘使用了以下技术来提高安全性：

• 将按键的位置打乱，以防止键盘记录器窃取按键输入。
• 使用遮罩来隐藏用户输入的字符，以防止他人看到。

以下是一个使用这个安全键盘的实例：

<input type="password" id="password" placeholder="请输入密码">
<div class="keyboard"></div>

当用户输入密码时，密码将显示在遮罩中。用户可以使用安全键盘输入密码，而无需担心密码被窃取。

当然，这个安全键盘只是一个简单的示例。您可以根据需要进行改进，例如：

• 添加更多按键，以支持输入其他字符。
• 添加键盘音效，以便用户可以听到自己输入的字符。
• 添加密码强度检测，以帮助用户选择强密码。

button.innerHTML = key;

innerHTML 属性用于设置或返回元素的内容。 在本例中，key 字符串是 keys 数组中的每个字符串。因此，循环将为每个按钮设置一个不同的文本。

以下是 innerHTML 属性的语法： element.innerHTML = string; 其中 element 是元素对象，string 是字符串。

在本例中，element 是 button 元素。string 是 keys 数组中的每个字符串。

change、input事件

在 JavaScript 中，change 和 input 事件都是用于处理输入框值发生变化的事件。

change 事件在输入框失去焦点时触发。input 事件在输入框的值发生变化时立即触发。

区别

change 事件和 input 事件的主要区别在于触发时机。change 事件在输入框失去焦点时触发，而 input 事件在输入框的值发生变化时立即触发。

以下是 change 事件和 input 事件的对比表：

示例

以下是一个使用 change 事件的示例：

const input = document.querySelector('input');

input.addEventListener('change', () => {
  // 输入框的值发生变化时执行此操作
});

以下是一个使用 input 事件的示例：

const input = document.querySelector('input');

input.addEventListener('input', () => {
  // 输入框的值发生变化时立即执行此操作
});

应用场景

change 事件和 input 事件可以用于以下场景：

• 验证输入值
• 保存输入值
• 发送输入值

例如，可以使用 change 事件来验证用户输入的密码是否符合要求。也可以使用 input 事件来实时保存用户输入的值，以便用户可以随时查看。

submit事件

在 JavaScript 中，submit 事件是表单提交时触发的事件。它通常用于在将表单发送到服务器之前对表单进行校验，或者中止提交，并使用 JavaScript 来处理表单。

触发条件

submit 事件会在以下情况下触发：

• 用户点击<input type="submit"> 或 <input type="image"> 元素。
• 用户在 <input type="text"> 或 <input type="textarea"> 元素中按下 Enter 键。

使用方法

可以使用以下方法来绑定 submit 事件处理函数：

// 绑定到表单
form.addEventListener("submit", function(event) {
  // 处理表单
});

// 绑定到提交按钮
submitButton.addEventListener("submit", function(event) {
  // 处理表单
});

处理函数

submit 事件处理函数通常用于以下目的：

• 对表单进行校验。
• 中止提交。
• 使用 JavaScript 来处理表单。

示例

以下示例演示了如何使用 submit 事件进行表单校验：

// 表单
<form action="submit.php">
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password" placeholder="密码">
  <input type="submit" value="提交">
</form>

// JavaScript
function validateForm(event) {
  // 获取表单数据
  const username = document.querySelector("input[name='username']").value;
  const password = document.querySelector("input[name='password']").value;

  // 校验表单
  if (username === "") {
    alert("请输入用户名");
    event.preventDefault();
    return;
  }

  if (password === "") {
    alert("请输入密码");
    event.preventDefault();
    return;
  }

  // 提交表单
  event.target.submit();
}

// 绑定事件
form.addEventListener("submit", validateForm);

在该示例中，我们使用 validateForm() 函数来对表单进行校验。如果表单数据不正确，则会显示警告消息，并阻止表单提交。如果表单数据正确，则会提交表单。

cut&copy&paste

在 JavaScript 中，可以使用以下方法来实现剪切、复制和粘贴功能：

剪切（cut）

• 使用 document.execCommand() 方法

// 剪切文本
document.execCommand("copy", false, "Hello, world!");

• 使用 Clipboard API

// 剪切文本
const text = "Hello, world!";
const clipboard = new Clipboard(document.querySelector(".clip-target"));
clipboard.writeText(text);

复制（copy）

• 使用 document.execCommand() 方法

// 复制文本
document.execCommand("copy", false, document.querySelector(".clip-target").textContent);

• 使用 Clipboard API

// 复制文本
const text = document.querySelector(".clip-target").textContent;
const clipboard = new Clipboard(document.querySelector(".clip-target"));
clipboard.writeText(text);

粘贴（paste）

• 使用 document.execCommand() 方法

// 粘贴文本
document.execCommand("paste", false, null);

• 使用 Clipboard API

// 粘贴文本
const clipboard = new Clipboard(document.querySelector(".clip-target"));
clipboard.readText().then((text) => {
  // 处理粘贴的文本
});

示例

以下示例演示了如何使用 JavaScript 来实现剪切、复制和粘贴功能：

//HTML
<div class="clip-target">
  <p>Hello, world!</p>
</div>

//Javascript
// 剪切
function cutText() {
  // 使用 document.execCommand() 方法
  document.execCommand("copy", false, "Hello, world!");

  // 使用 Clipboard API
  // const text = "Hello, world!";
  // const clipboard = new Clipboard(document.querySelector(".clip-target"));
  // clipboard.writeText(text);
}

// 复制
function copyText() {
  // 使用 document.execCommand() 方法
  document.execCommand("copy", false, document.querySelector(".clip-target").textContent);

  // 使用 Clipboard API
  // const text = document.querySelector(".clip-target").textContent;
  // const clipboard = new Clipboard(document.querySelector(".clip-target"));
  // clipboard.writeText(text);
}

// 粘贴
function pasteText() {
  // 使用 document.execCommand() 方法
  document.execCommand("paste", false, null);

  // 使用 Clipboard API
  // const clipboard = new Clipboard(document.querySelector(".clip-target"));
  // clipboard.readText().then((text) => {
  //   // 处理粘贴的文本
  // });
}

// 绑定事件
document.querySelector(".clip-target").addEventListener("click", cutText);
document.querySelector(".clip-target").addEventListener("dblclick", copyText);
document.querySelector(".clip-target").addEventListener("contextmenu", pasteText);

在该示例中，我们为

<html>
<head>
  <title>DOMContentLoaded vs Load</title>
  <script>
    // DOMContentLoaded 事件
    document.addEventListener("DOMContentLoaded", function() {
      // 初始化 DOM 元素
      const element = document.querySelector("#my-element");
      element.innerHTML = "Hello, world!";

      // 绑定事件
      element.addEventListener("click", function() {
        alert("You clicked the element!");
      });
    });

    // load 事件
    window.addEventListener("load", function() {
      // 显示页面内容
      document.querySelector("body").style.display = "block";

      // 执行复杂的逻辑
      // ...
    });
  </script>
</head>
<body>
  <h1 id="my-element"></h1>
</body>
</html>