JavaScript中的preventDefault()方法

在JavaScript中，preventDefault()方法是一个常用的方法。通过这个方法，我们可以阻止一个事件的默认行为。这个方法通常会在事件处理程序中被调用。

什么是默认行为？

当某个事件被触发时，浏览器会执行该事件的默认行为。例如，在表单中按下“提交”按钮时，浏览器会把表单数据提交到服务器上。这就是“提交”按钮的默认行为。

preventDefault()方法的语法

preventDefault()方法非常简单，只需要在事件处理程序中调用它即可：

event.preventDefault();

这个方法接收一个事件对象作为参数。通过这个方法，我们可以阻止该事件的默认行为。

preventDefault()方法的应用场景

preventDefault()方法可以应用在很多场景中。下面是一些常用场景：

阻止表单提交

当用户点击“提交”按钮时，页面会自动刷新，这可能会导致数据的丢失。为了避免这种情况的发生，我们可以在表单的submit事件中调用preventDefault()方法，阻止表单的默认提交行为：

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault();
});

阻止超链接的默认行为

当用户点击超链接时，浏览器会自动跳转到链接地址。如果我们希望在不跳转的情况下执行一些其他操作，我们可以在超链接的click事件中调用preventDefault()方法：

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

阻止键盘事件的默认行为

在键盘事件中，一些按键会触发浏览器的默认行为。例如，按下“退格”键会导致当前页面回退。如果我们希望阻止这些默认行为，可以在键盘事件处理程序中调用preventDefault()方法：

document.addEventListener('keydown', function(event) {
  // 阻止退格键的默认行为
  if(event.keyCode === 8) {
    event.preventDefault();
  }
});

总结

preventDefault()方法是一个非常有用的方法，可以用来防止一些意料之外的情况发生。在正常使用中，我们可以在事件处理程序中调用该方法来阻止默认行为。