event-handlers

# 事件处理程序 TypeScript 模式 正确的事件类型定义可确保对事件属性和目标元素进行类型安全的访问。 ## 鼠标事件 typescript // 点击事件 function handleClick(event: React.MouseEvent) { event.preventDefault(); event.stopPropagation(); // 目标元素类型正确 event.currentTarget.disabled = true; event.currentTarget.textContent = 'Clicked'; // 鼠标位置 console.log(event.clientX, event.clientY); console.log(event.pageX, event.pageY); // 鼠标按键 console.log(event.button); // 0 = 左键, 1 = 中键, 2 = 右键 console.log(event.buttons); // 按下按键的位掩码 // 修饰键 if (event.ctrlKey || event.metaKey) { console.log('Ctrl/Cmd + Click'); } if (event.shiftKey) { console.log('Shift + Click'); } if (event.altKey) { console.log('Alt + Click'); } } // 鼠标移动 function handleMouseMove(event: React.MouseEvent) { const rect = event.currentTarget.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; console.log(`Position in element: ${x}, ${y}`); } // 悬停事件 function handleMouseEnter(event: React.MouseEvent) { event.currentTarget.style.backgroundColor = 'lightblue'; } function handleMouseLeave(event: React.MouseEvent) { event.currentTarget.style.backgroundColor = ''; } // 双击 function handleDoubleClick(event: React.MouseEvent) { console.log('Double clicked'); } ## 表单事件 typescript // 表单提交 function handleSubmit(event: React.FormEvent) { event.preventDefault(); const form = event.currentTarget; const formData = new FormData(form); const data = { name: formData.get('name') as string, email: formData.get('email') as string, }; console.log(data); } // 输入变更 function handleChange(event: React.ChangeEvent) { const target = event.target; // 针对文本输入 if (target.type === 'text' || target.type === 'email') { console.log(target.value); // string } // 针对复选框 if (target.type === 'checkbox') { console.log(target.checked); // boolean } // 针对单选按钮 if (target.type === 'radio') { console.log(target.value, target.checked); } // 针对数字输入 if (target.type === 'number') { console.log(target.valueAsNumber); // number } // 针对文件输入 if (