stopPropagation()和preventDefault()这两个方法有什么区别？

stopPropagation() 和 preventDefault() 是 JavaScript 中的两个方法，它们都用于处理 DOM（文档对象模型）事件，但功能和使用场景是不同的。

stopPropagation()

event.stopPropagation() 方法阻止事件冒泡，即阻止事件向上级元素传播。在 DOM 中，当一个事件被触发时，它首先会在发生事件的元素上触发，然后逐级向上传播，这就是所谓的事件冒泡。stopPropagation() 就是用来阻止这种冒泡行为的。

例如，如果你有一个嵌套的 div 结构，并且你希望在内部 div 上点击时，只触发内部 div 的点击事件，而不触发外部 div 的点击事件，你就可以在内部 div 的点击事件处理函数中使用 stopPropagation()。

innerDiv.addEventListener('click', function(event) {
    alert('Inner div clicked!');
    event.stopPropagation();
});

outerDiv.addEventListener('click', function() {
    alert('Outer div clicked!');
});

在上面的例子中，如果你点击内部 div，只会弹出 "Inner div clicked!"，而不会弹出 "Outer div clicked!"，因为 stopPropagation() 阻止了事件冒泡。

preventDefault()

event.preventDefault() 方法阻止默认事件的发生。默认事件是指，当某些事件发生时，浏览器会自动执行的一些行为。例如，点击一个提交按钮时，浏览器会尝试提交表单。preventDefault() 可以阻止这种默认行为。

例如，你可能有一个提交按钮，但你希望在表单提交之前验证输入。如果用户输入无效，你可以使用 preventDefault() 来阻止表单的提交。

form.addEventListener('submit', function(event) {
    if (!validateForm()) {
        event.preventDefault();
        alert('Please correct the form errors before submitting.');
    }
});

在上面的例子中，如果 validateForm() 返回 false，则 preventDefault() 会阻止表单的提交，并弹出一个警告。

总的来说，stopPropagation() 和 preventDefault() 的主要区别在于：stopPropagation() 阻止事件冒泡，即阻止事件向上级元素传播；而 preventDefault() 阻止事件的默认行为。