lovecoding
/
VIP20


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../babel.min.js"></script>
    <script src="../../react.development.js"></script>
    <script src="../../react-dom.development.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      // 原生DOM的事件绑定：1 通过事件属性：onclick,onkeyup,onchange,onblur,onsubmit，... 2 通过DOM对象的方法 addEventListener()

      //一： 在React中，只能通过 第一种方式 来注册事件。但是也有一点区别：原生事件属性 是由 “on + 事件类型” 组成的属性 ，因此在jsx上需要改成等价的驼峰命名即可，绑定的事件监听器必须是函数类型

      // 二：如果获取事件对象。当React事件触发时，事件的监听器会被传入一个唯一参数 就是 事件对象，一般参数名为 e，ev， event。

      const root = ReactDOM.createRoot(document.querySelector('#root'));

      function App() {
        function handleChange() {}
        return (
          <div>
            <p>
              <button
                onClick={(e) => {
                  // alert('你点我啊！');
                  console.log(e);
                }}
              >
                按钮
              </button>
            </p>
            <p>
              <input
                type="text"
                onClick={(e) => {
                  console.log(`output->e`, e);
                  console.log(e.target.value);
                }}
                onKeyUp={function (e) {
                  console.log(`output->keyup `);
                  console.log(e);
                }}
              />
            </p>
            <p>
              <input type="text" onChange={handleChange} />
            </p>
          </div>
        );
      }

      root.render(<App />);
    </script>
  </body>
</html>