JavaScript事件處理表單事件處理

小樊
81
2024-10-31 11:03:58

在JavaScript中，表單事件處理是一種常見(jiàn)的操作，用于響應(yīng)用戶與表單元素的交互。以下是一些常用的表單事件及其處理方法：

  1. onsubmit：當(dāng)表單提交時(shí)觸發(fā)?？梢允褂?code>event.preventDefault()阻止表單的默認(rèn)提交行為。
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
  event.preventDefault();
  // 處理表單數(shù)據(jù)
});
  1. onsubmit：當(dāng)表單提交時(shí)觸發(fā)?？梢允褂?code>event.preventDefault()阻止表單的默認(rèn)提交行為。
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
  event.preventDefault();
  // 處理表單數(shù)據(jù)
});
  1. onchange：當(dāng)表單元素值發(fā)生變化時(shí)觸發(fā)。
const input = document.querySelector('input');
input.addEventListener('change', (event) => {
  console.log('Input value changed:', event.target.value);
});
  1. oninput：當(dāng)表單元素值發(fā)生變化時(shí)觸發(fā)。
const input = document.querySelector('input');
input.addEventListener('input', (event) => {
  console.log('Input value changed:', event.target.value);
});
  1. onfocus：當(dāng)表單元素獲得焦點(diǎn)時(shí)觸發(fā)。
const input = document.querySelector('input');
input.addEventListener('focus', (event) => {
  console.log('Input focused:', event.target.value);
});
  1. onblur：當(dāng)表單元素失去焦點(diǎn)時(shí)觸發(fā)。
const input = document.querySelector('input');
input.addEventListener('blur', (event) => {
  console.log('Input lost focus:', event.target.value);
});
  1. onkeyup：當(dāng)表單元素值發(fā)生變化時(shí)觸發(fā)（按鍵抬起）。
const input = document.querySelector('input');
input.addEventListener('keyup', (event) => {
  console.log('Input value changed:', event.target.value);
});
  1. onkeydown：當(dāng)表單元素值發(fā)生變化時(shí)觸發(fā)（按鍵按下）。
const input = document.querySelector('input');
input.addEventListener('keydown', (event) => {
  console.log('Input value changed:', event.target.value);
});
  1. onclick：當(dāng)表單元素被點(diǎn)擊時(shí)觸發(fā)。
const button = document.querySelector('button');
button.addEventListener('click', (event) => {
  console.log('Button clicked');
});

這些事件處理程序可以根據(jù)需要組合使用，以便更好地控制表單的行為。

0 踩