js常用事件（2）

表单事件 (Form Events)

submit: 当用户提交表单时触发。

formElement.addEventListener('submit', function(event) {
    event.preventDefault(); // 防止表单提交
    console.log('Form submitted!');
});

change: 当表单元素的值发生变化时触发（例如选择菜单、复选框）。

inputElement.addEventListener('change', function() {
    console.log('Input value changed!');
});

input: 当用户在输入框中输入时持续触发。

inputElement.addEventListener('input', function() {
    console.log('Input event fired!');
});

focus/blur: 当元素获得或失去焦点时触发。

inputElement.addEventListener('focus', function() {
    console.log('Input focused!');
});
inputElement.addEventListener('blur', function() {
    console.log('Input blurred!');
});

窗口事件 (Window Events)

load: 当页面完全加载时触发。

window.addEventListener('load', function() {
    console.log('Page fully loaded!');
});

resize: 当浏览器窗口大小发生变化时触发。

window.addEventListener('resize', function() {
    console.log('Window resized!');
});

scroll: 当页面或元素滚动时触发。

window.addEventListener('scroll', function() {
    console.log('Page scrolled!');
});

拖放事件 (Drag and Drop Events)

dragstart: 当拖动操作开始时触发。

element.addEventListener('dragstart', function(event) {
    console.log('Drag started!');
});

dragover: 当元素或选择的文本被拖到有效的放置目标上方时触发。

element.addEventListener('dragover', function(event) {
    event.preventDefault(); // 允许放置
    console.log('Dragging over element!');
});

drop: 当拖动的元素或文本被放置时触发。

element.addEventListener('dragover', function(event) {
    event.preventDefault(); // 允许放置
    console.log('Dragging over element!');
});

dragend: 当拖动操作结束时触发。

element.addEventListener('dragend', function(event) {
    console.log('Drag ended!');
});