import React from "react"; function EventsLog() { const [logs, setLogs] = React.useState([]); const MAX_LOGS = 15; const logIndex = React.useRef(0); const addLog = (type, newLog) => { setLogs((log) => { const nextLogs = [ { index: logIndex.current, type, value: newLog, }, ...log, ]; logIndex.current += 1; if (nextLogs.length > MAX_LOGS) { return nextLogs.slice(0, MAX_LOGS); } else { return nextLogs; } }); }; React.useEffect(() => { function handleScroll(ev) { addLog("scroll", `User scrolled to ${window.scrollY}`); } function handleKeyDown(ev) { addLog("keyboard", `User pressed key ${ev.key}`); } function handleKeyUp(ev) { addLog("keyboard", `User released key ${ev.key}`); } window.addEventListener("scroll", handleScroll); window.addEventListener("keydown", handleKeyDown); window.addEventListener("keyup", handleKeyUp); return () => { window.removeEventListener("scroll", handleScroll); window.removeEventListener("keydown", handleKeyDown); window.removeEventListener("keyup", handleKeyUp); }; }, []); return (

addLog("mouse", "User clicked")} onMouseDown={() => addLog("mouse", "User depressed mouse button")} onMouseUp={() => addLog("mouse", "User released mouse button")} onMouseMove={(ev) => addLog( "mouse", "User moved mouse to [" + ev.clientX + ", " + ev.clientY + "]" ) } onDoubleClick={() => addLog("mouse", "User double-clicked")} onTouchStart={() => addLog("touch", "User started touching")} onTouchMove={() => addLog("touch", "User dragged finger")} onTouchEnd={() => addLog("touch", "User stopped touching")} >

{index === 0 ? 0 : (index - 1) / 2}. {type} {value}

{ ev.preventDefault(); addLog("submit", "User submitted form"); }} > {[1, 2].map((index) => ( ))} { ev.stopPropagation(); addLog("mouse", "User clicked input"); }} onMouseDown={(ev) => { ev.stopPropagation(); addLog("mouse", "User started clicking input"); }} onMouseOver={(ev) => { addLog("mouse", "User hovered over input"); }} onMouseLeave={(ev) => { addLog("mouse", "User stopped hovering over input"); }} onMouseMove={(ev) => { ev.stopPropagation(); }} onMouseDown={(ev) => { ev.stopPropagation(); addLog("mouse", "User finished clicking input"); }} onFocus={(ev) => { addLog("focus", "User focused input"); }} onBlur={(ev) => { addLog("focus", "User unfocused input"); }} onChange={(ev) => { addLog("change", "User changed input to “" + ev.target.value + "”"); }} />

); } export default EventsLog;

事件处理程序

On this page