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()方法阻止传播。在实际应用中，我们需要结合业务需求，谨慎使用这两个方法，达到更好的用户体验。