e.preventdefault()是干嘛的

一、基本概念

e.preventDefault() 是在 JavaScript 中常用的一个方法，用于阻止浏览器默认的行为，也就是防止事件的默认操作。 当一个事件被触发时，浏览器会默认执行一些操作，如在表单中点击提交按钮会跳转到另一个页面，而在链接中点击会跳转到另一页面。这些默认的操作可以通过 e.preventDefault() 在 JavaScript 中进行阻止。

二、应用场景

1. 防止表单提交

   <form id="my-form">
       <input type="text" id="my-input">
       <button id="my-button">提交</button>
   </form>
   <script>
       document.getElementById("my-form").addEventListener("submit", function(event) {
           event.preventDefault();
           console.log("表单提交已被阻止");
       });
   </script>
   

   上述代码中，使用 addEventListener() 方法监听表单的 submit 事件，并在回调函数中调用 event.preventDefault() 方法阻止默认提交事件。在这个示例中，事件被阻止后，控制台会输出“表单提交已被阻止”。
2. 防止 Anchor 标签的跳转

   <a href="https://www.baidu.com" id="my-link">链接</a>
   <script>
       document.getElementById("my-link").addEventListener("click", function(event) {
           event.preventDefault();
           console.log("跳转已被阻止");
       });
   </script>
   

   上述代码中，使用 addEventListener() 方法监听 Anchor 标签的 click 事件，并在回调函数中调用 event.preventDefault() 方法阻止默认跳转事件。在这个示例中，事件被阻止后，控制台会输出“跳转已被阻止”。

三、事件冒泡和 e.preventDefault() 的关系

事件冒泡是指事件被触发后，会自动向父元素传播。也就是说，如果在一个子元素上绑定了某个事件，当事件被触发后，该事件会向父元素一级一级地传播，直到传到 document 对象才停止。 在事件冒泡的过程中，如果同时使用了 e.preventDefault() 和 e.stopPropagation()，则事件的默认行为会被阻止，并且不会再传播到父元素上。

<div id="my-parent">
    <div id="my-child">点击我</div>
</div>
<script>
    document.getElementById("my-child").addEventListener("click", function(event) {
        event.preventDefault();
        event.stopPropagation();
        console.log("事件传播已被阻止");
    });
</script>

上述代码中，使用 addEventListener() 方法监听子元素的 click 事件，并在回调函数中对事件进行了阻止。 同时，使用 event.stopPropagation() 方法阻止事件冒泡，保证事件不会传播到父元素上。

四、总结

e.preventDefault() 方法是防止浏览器默认行为的最常用的方法之一，常用于表单提交、链接跳转等操作。同时，事件冒泡是指事件传递到父元素的过程，可以使用 e.stopPropagation() 方法阻止传播。在实际应用中，我们需要结合业务需求，谨慎使用这两个方法，达到更好的用户体验。