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()方法阻止傳播。在實際應用中，我們需要結合業務需求，謹慎使用這兩個方法，達到更好的用戶體驗。