10. React Event 모음

function App() {
  return (
    <div className="App">
      <button
        onClick={() => {
          console.log('onClick');
        }}
        onMouseDown={() => {
          console.log('onMouseDown');
        }}
        onMouseUp={() => {
          console.log('onMouseUp');
        }}
      >
        Button
      </button>
      <div
        className="box"
        onClick={() => {
          console.log('onClick');
        }}
        onMouseEnter={() => {
          console.log('onMouseEnter');
        }}
        onMouseLeave={() => {
          console.log('onMouseLeave');
        }}
        onMouseMove={() => {
          console.log('onMouseMove');
        }}
      ></div>
      <div>
        <input
          type="text"
          onKeyDown={() => {
            console.log('onKeyDown');
          }}
          onKeyUp={() => {
            console.log('onKeyUp');
          }}
          onKeyPress={() => {
            console.log('onKeyPress');
          }}
          onFocus={() => {
            console.log('onFocus');
          }}
          onBlur={() => {
            console.log('onBlur');
          }}
          onChange={() => {
            console.log('onChange');
          }}
        />
      </div>
    </div>
  );
}

export default App;

 

 

출처 - https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%8B%A4%EB%AC%B4%EC%84%9C%EB%B9%84%EC%8A%A4-%EC%A0%9C%EC%9E%91%ED%95%98%EA%B8%B0/dashboard