博客

preventDefault()事件方法

  • Post category:jquery

预备知识：事件传播模型

事件在 HTML 中按照传播方式分为三个阶段：

  1. 事件捕获阶段：事件从根节点自上而下向目标节点传播；
  2. 目标阶段：事件到达目标节点，触发目标节点的事件处理程序；
  3. 事件冒泡阶段：事件从目标节点自下而上向根节点传播。

preventDefault() 方法

在 HTML 中，当事件被触发时，它默认会按照事件传播模型执行，这可能会产生某些意想不到的结果，如在 form 表单提交时，我们需要对 form 表单中输入内容进行验证，但是在提交时会刷新页面导致输入框内容丢失。这种时候，我们可以使用 preventDefault() 方法阻止默认行为的执行。preventDefault() 方法可以在 event 对象中被调用，它的作用是取消当前事件的默认行为。

preventDefault() 方法的使用方法

event.preventDefault()

注：event 指代触发事件的 event 对象。

示例一：

HTML 代码：

<a href="https://www.baidu.com" id="link">百度一下，你就知道</a>

JavaScript 代码：

document.getElementById('link').addEventListener('click', function(event) {
  event.preventDefault();
  console.log('已经阻止了默认行为');
});

在上面的代码中，当用户点击 a 标签时，会触发 click 事件，由于使用了 event.preventDefault() 方法，程序会执行默认的 console.log() 方法，并且不会跳转到百度网站。

示例二：

HTML 代码：

<form>
  <input type="text" id="input">
  <br>
  <button type="submit">提交</button>
</form>

JavaScript 代码：

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault();
  if (document.getElementById('input').value == '') {
    alert('输入框不能为空');
  } else {
    alert('输入框已经填写');
  }
});

在上面的代码中，当用户点击提交按钮时，会触发 submit 事件，由于使用了 event.preventDefault() 方法，程序不会进行表单提交，而是进行表单验证，如果输入框为空，弹出提示框提醒用户未输入，否则提示用户输入框已经填写。

总结

preventDefault() 方法可以防止默认的事件行为执行，比如在 form 表单提交时进行表单验证而不是提交表单到服务器。理解 JavaScript 事件传播模型可以更好的使用 preventDefault() 方法。

Tags: