Javascript Event 撤銷 (Event Cancellation)

在 Javascript 中，事件處理程序、事件監(jiān)聽器和事件回調(diào)函數(shù)通常用于捕獲 web 應(yīng)用程序中的用戶交互。有時(shí)候，您可能希望在事件觸發(fā)之前或之后取消該事件的默認(rèn)行為。這是由于某些原因，例如您不希望用戶執(zhí)行該操作或您需要進(jìn)一步調(diào)整應(yīng)用程序的工作流程。這時(shí)，您需要使用 Javascript 的事件撤銷機(jī)制來取消事件的默認(rèn)行為。

例如，當(dāng)用戶單擊某個(gè)按鈕時(shí)，通常會(huì)執(zhí)行默認(rèn)的操作，例如將表單提交或鏈接跳轉(zhuǎn)到另一個(gè)頁(yè)面。但是，在某些情況下，您可能希望取消默認(rèn)的操作，例如在執(zhí)行異步操作（例如與 API 交互）時(shí)，您不想讓頁(yè)面重新加載。在這種情況下，您可以使用 Javascript 的事件撤銷機(jī)制來取消提交表單或跳轉(zhuǎn)鏈接的默認(rèn)行為。

const form = document.getElementById('my-form');
form.addEventListener('submit', function(event) {
event.preventDefault(); // 取消默認(rèn)行為
// 執(zhí)行異步操作
});

在上面的示例中，我們?cè)诒韱卧厣咸砑犹峤皇录O(jiān)聽器。在事件處理程序函數(shù)中，我們使用了 preventDefault() 方法來阻止表單默認(rèn)的提交行為。這樣，即使用戶單擊了表單提交按鈕，表單的提交行為也將被取消。然后，我們可以執(zhí)行我們自己的異步操作。

除此之外，您還可以使用事件撤銷機(jī)制來取消另一些默認(rèn)事件行為，例如取消單擊鏈接后的默認(rèn)行為:

const link = document.getElementById('my-link');
link.addEventListener('click', function(event) {
event.preventDefault(); // 取消默認(rèn)行為
// 執(zhí)行其他操作，例如加載新頁(yè)面的 Ajax 請(qǐng)求
});

在這個(gè)示例中，我們?yōu)殒溄釉靥砑恿它c(diǎn)擊事件監(jiān)聽器。在事件處理程序函數(shù)中，我們使用 preventDefault() 方法來防止默認(rèn)跳轉(zhuǎn)到鏈接指定的頁(yè)面。然后，我們可以執(zhí)行我們自己的其他操作。

在處理事件時(shí)，您應(yīng)該注意：事件撤銷機(jī)制僅取消事件的默認(rèn)行為。它不會(huì)阻止事件的傳播。如果您想徹底停止事件傳播，您應(yīng)該使用 stopPropagation() 方法。

const container = document.getElementById('my-container');
container.addEventListener('click', function(event) {
event.stopPropagation(); // 停止事件傳播
// 執(zhí)行其他操作
});

在上面的示例中，我們?cè)诎厣咸砑訂螕羰录Ｔ谑录幚沓绦蚝瘮?shù)中，我們使用 stopPropagation() 方法阻止事件傳播。這意味著單擊元素內(nèi)部的任何其他元素也不會(huì)觸發(fā)單擊事件。然后，我們可以執(zhí)行我們自己的其他操作。

總之，在進(jìn)行 Web 開發(fā)時(shí)，Javascript 的事件撤銷機(jī)制是非常有用的。無論您想要取消表單提交，阻止鏈接跳轉(zhuǎn)，還是停止事件傳播，都可以使用事件撤銷機(jī)制來完成。始終牢記：撤銷事件的默認(rèn)行為只是取消了事件的默認(rèn)行為，事件本身仍然可被傳播，為了完全停止事件傳播，要使用 stopPropagation() 方法。