JS中的常见事件

鼠标事件

click：当鼠标指针在元素上点击时触发（按下并释放按键）。

mouseenter：当鼠标指针移入元素边界时触发，不冒泡。

mouseleave：当鼠标指针移出元素边界时触发，不冒泡。

键盘事件

keydown：当键盘按键被按下时触发，持续按住会重复触发。

keyup：当键盘按键被释放时触发。

焦点事件

focus：当元素获得焦点时触发（如点击输入框或Tab切换焦点）。

blur：当元素失去焦点时触发。

表单事件

input：当表单元素（如<input>、<textarea>）的值发生变化时实时触发。

submit：当表单提交时触发（通常绑定在<form>元素上）。

代码示例

// 鼠标事件示例
element.addEventListener('click', () => console.log('Clicked'));
element.addEventListener('mouseenter', () => console.log('Mouse entered'));
element.addEventListener('mouseleave', () => console.log('Mouse left'));

// 键盘事件示例
inputElement.addEventListener('keydown', (e) => console.log('Key pressed:', e.key));
inputElement.addEventListener('keyup', (e) => console.log('Key released:', e.key));

// 焦点事件示例
inputElement.addEventListener('focus', () => console.log('Input focused'));
inputElement.addEventListener('blur', () => console.log('Input lost focus'));

// 表单事件示例
formElement.addEventListener('submit', (e) => {
  e.preventDefault();
  console.log('Form submitted');
});
inputElement.addEventListener('input', (e) => console.log('Input value:', e.target.value));