javascript开发随笔一 preventDefault的必要

在JavaScript开发中，我们经常会用到一些DOM操作，例如点击超链接跳转页面，提交表单等。但是有些时候，我们可能会需要改变这些默认行为，比如说：阻止页面跳转，防止表单提交。

JavaScript开发随笔一：preventDefault的必要

在JavaScript开发中，我们经常会用到一些DOM操作，例如点击超链接跳转页面，提交表单等。但是有些时候，我们可能会需要改变这些默认行为，比如说：阻止页面跳转，防止表单提交。

这个时候，我们就需要用到事件对象的preventDefault()方法。这个方法可以阻止元素默认的行为，从而实现我们期望的操作。

preventDefault()方法的使用

在事件处理函数中，调用事件对象的preventDefault()函数即可阻止元素默认行为。下面是一个简单的示例，通过点击链接来阻止页面跳转：

const link = document.querySelector('a');
link.addEventListener('click', function(event) {
  event.preventDefault();
});

在上面的代码中，当我们点击页面中的超链接时，事件处理函数会被触发，并阻止超链接跳转。

阻止表单提交

preventDefault()方法同样适用于阻止表单的默认提交行为。下面是一个简单的示例：

<form>
  <label for="name">姓名:</label>
  <input type="text" id="name">

  <label for="age">年龄:</label>
  <input type="text" id="age">

  <button id="submit">提交</button>
</form>

const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  const name = document.querySelector('#name').value;
  const age = document.querySelector('#age').value;
  console.log(`姓名：${name}，年龄：${age}`);
});

在上面的代码中，当我们点击表单中的提交按钮时，事件处理函数会被触发，并阻止表单提交。然后，我们可以通过JavaScript来获取表单中输入的值，并进行一些自定义的操作。

通过上面这个示例，我们可以看到preventDefault()方法的威力。它可以让我们完全掌控元素的行为，实现我们所期望的功能。

注意：虽然preventDefault()方法可以阻止元素默认行为，但是它并不能完全阻止事件传播。如果需要完全阻止事件传播，可以使用事件对象的stopPropagation()方法。