從多個方面深入理解form.on()

Web頁面中，常常需要響應某些事件，比如用戶提交表單、滑鼠點擊等等。在JavaScript中，處理這些事件的方式是通過指定相關的event handler，然後在事件觸發時調用。form.on()就是一個常見的event handler，用於處理表單元素的事件。在本文中，我們將深入探討form.on的使用方法。

一、基本語法

form.on()是用於註冊表單控制項事件的函數，它的基本語法如下：

form.on(eventType, handler)

其中，eventType是要註冊的事件類型，比如”submit”、”change”、”blur”等等；handler是一個將要被觸發的Javascript函數，它接受一個event對象作為參數。下面是一個例子：


    
    
    



document.getElementById("myForm").on("submit", function(e) {
    e.preventDefault();
    console.log("表單被提交了！");
});

以上代碼中，我們使用了on方法註冊了一個表單提交事件，在事件被觸發時，控制台將輸出”表單被提交了！”。注意，我們調用了event.preventDefault()方法，用來阻止表單默認的提交行為。

二、事件類型

form.on()支持多種事件類型，下面我們將介紹其中一些常見的類型。

1. submit

當表單被提交時觸發。在該事件處理函數中，可以進行表單數據的驗證、提交等處理。

2. change

當表單元素的值被改變時觸發。在該事件處理函數中，可以進行表單數據的實時校驗。

3. blur

當表單元素失去焦點時觸發。在該事件處理函數中，可以進行表單數據的最終校驗。

三、handler函數

form.on()所註冊的事件處理函數是一個Javascript函數，它接收一個event對象作為參數。在事件觸發時，瀏覽器會將event對象傳遞給該函數，並且在函數內部可以訪問該對象的屬性和方法。

1. 事件對象

下面是一些常用的event屬性和方法：

event.target：觸發事件的表單元素。
event.preventDefault()：阻止表單默認提交行為。
event.stopPropagation()：防止事件冒泡至父級元素。
event.preventDefault()：阻止默認的事件行為。
event.stopImmediatePropagation()：阻止事件的傳遞，不再執行下一個綁定的響應函數。

2. this關鍵字

在event handler函數中，this關鍵字指向觸發事件的表單元素。這對於獲取或設置表單元素的值非常有用。

四、實際使用

下面是一個實際應用案例，在用戶在表單中輸入文字時，動態展示用戶的輸入內容：

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/182387.html