一文搞懂各种 html 原生事件

1.mousedown 与 mouseup

1.鼠标按下去没有松开是什么事件?

在 JavaScript 中，当鼠标按下去没有松开时，通常会触发鼠标按下事件（mouse down event）。这个事件是mousedown。当用户按下鼠标左键、中键或右键时，mousedown 事件会被触发。

2.那鼠标弹起来呢?

鼠标弹起来时，通常会触发鼠标释放事件（mouse up event）。这个事件是mouseup。当用户释放鼠标左键、中键或右键时，mouseup 事件会被触发。你可以使用事件监听器来捕获这个事件，然后执行相应的操作。

3.mousedown+mouseup 等价于 click 吗？

注意：基本等价，但有些许不同

注意：click 事件其实就是 mousedown+mouseup 的组合，但是必须是发生在同一个 dom 上面，click 也可以按下之后不立马弹起鼠标，等到弹起来的时候才会触发 click 事件！

mousedown 事件和 mouseup 事件的组合通常可以模拟 click 事件，但它们并不完全等价。以下是它们之间的差异：

click 事件：
- click 事件表示用户按下鼠标按钮（通常是左键）并在相同元素上释放按钮，即按下和释放在同一个元素上发生。
- click 事件还会触发一系列其他事件，如 mousedown、mouseup、mousemove 等，以模拟点击的整个过程。
mousedown 和 mouseup 事件的组合：
- mousedown 事件表示用户按下鼠标按钮，而 mouseup 事件表示用户释放鼠标按钮。
- 当你将这两个事件组合在一起时，它们通常可以模拟 click 的行为，特别是如果在相同元素上按下并释放按钮。
- 但需要注意，如果在按下和释放之间发生鼠标移动，或者释放时不在同一元素上，那么这种组合的行为可能与 click 事件不同。

示例：

const element = document.getElementById("myElement");

element.addEventListener("mousedown", function (event) {
  console.log("Mouse button pressed");
});

element.addEventListener("mouseup", function (event) {
  console.log("Mouse button released");
});

element.addEventListener("click", function (event) {
  console.log("Mouse button clicked");
});

上述示例中，mousedown 和 mouseup 事件的组合可以模拟 click 事件，但要确保按下和释放在同一元素上，且没有鼠标移动。click 事件通常更方便，因为它封装了这些操作并且适用于大多数点击交互场景。

2.required 属性

实际上，HTML5 表单验证可以自动将无效的输入字段的边框颜色改为红色，无需额外的 CSS 样式或 JavaScript。这是浏览器内置的表单验证机制的一部分，它会自动应用默认样式来指示错误。

当你使用required属性或其他验证属性（如pattern、min、max等）时，浏览器会自动进行验证。如果输入字段的值不符合验证规则，浏览器会将边框颜色设置为红色，以可视化地指示错误。同时，它还会在提交表单时显示默认的错误消息。

以下是一个示例：

html

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required />
  <label for="password">密码：</label>
  <input type="text" id="password" name="password" required />
  <button type="submit">登录</button>
</form>

在上面的示例中，required属性用于指示用户名字段是必填的。如果用户尝试提交表单而用户名字段为空，浏览器会自动将边框颜色设置为红色，并显示一个默认的错误消息。

所以，基本的表单验证不需要额外的 JavaScript 或 CSS 来改变边框颜色或显示错误消息。浏览器会自动处理这些方面的视觉提示。你可以通过 CSS 来自定义样式，但不必手动处理边框颜色。

实现的效果大概可以描述为：

在点击登录按钮时，检查用户名和密码是否填写，如果没有填写，则显示错误消息、将框的颜色改为红色，并将焦点设置为第一个框。

否则，如果填写了用户名和密码，则清除错误消息并恢复框的正常样式。

但是如果通过 js 和 css 来实现上述的效果，会非常麻烦！

比如：

document.addEventListener("DOMContentLoaded", function () {
  const loginForm = document.getElementById("loginForm");
  const usernameInput = document.getElementById("username");
  const passwordInput = document.getElementById("password");
  const usernameError = document.getElementById("usernameError");
  const passwordError = document.getElementById("passwordError");

  const loginButton = document.getElementById("loginButton");
  loginButton.addEventListener("click", function () {
    // 检查用户名和密码是否填写
    if (usernameInput.value.trim() === "") {
      usernameError.style.display = "block";
      usernameInput.style.border = "1px solid red";
      usernameInput.focus();
    } else {
      usernameError.style.display = "none";
      usernameInput.style.border = "";
    }

    if (passwordInput.value.trim() === "") {
      passwordError.style.display = "block";
      passwordInput.style.border = "1px solid red";
      if (usernameInput.value.trim() !== "") {
        passwordInput.focus();
      }
    } else {
      passwordError.style.display = "none";
      passwordInput.style.border = "";
    }
  });
});

一文搞懂各种 html 原生事件 ​

1.mousedown 与 mouseup ​

1.鼠标按下去没有松开是什么事件? ​

2.那鼠标弹起来呢? ​

3.mousedown+mouseup 等价于 click 吗？ ​

2.required 属性 ​