%!s(int64=2) %!d(string=hai) anos · 87f366ac1d
--- a/20_React.js_VIP22/React.js快速进坑.md
+++ b/20_React.js_VIP22/React.js快速进坑.md
@@ -119,13 +119,83 @@ let element = (
 
				 ReactDOM.createRoot(document.getElementById('root')).render(element);
			
 
				 ```
			
 
				 
			
 
				+## 4. 事件处理
			
 
				 
			
 
				+> 所有UI界面都需要通过事件来完成交互的。
			
 
				+>
			
 
				+> 不同与Vue，有v-on指令来处理事件，react是通过jsx相对应的事件属性来实现的
			
 
				 
			
 
				+React在处理事件时，和原生DOM对象类似。可以通过对应事件相关属性来注册监听器。
			
 
				 
			
 
				+不同的是：
			
 
				 
			
 
				+1. 原生DOM事件属性 都是 全小写的；而React是 基于原生事件属性转换后的驼峰命名。
			
 
				+2. 原生DOM事件绑定的值类型为 string；而React JSX 事件绑定的值类型为 function。
			
 
				+
			
 
				+```html
			
 
				+<!-- 原生事件注册 -->
			
 
				+<button id="btn">点我试试</button>
			
 
				+<script>
			
 
				+  // 比如注册点击事件
			
 
				+  document.getElementById('btn').onclick = function () {
			
 
				+    alert('你敢点我？？？');
			
 
				+  };
			
 
				+</script>
			
 
				+```
			
 
				+
			
 
				+```jsx
			
 
				+// React中的实现
			
 
				+function handleClick() {
			
 
				+  alert('你敢点我？？？');
			
 
				+}
			
 
				+const element = <button onClick={handleClick}>点我试试</button>;
			
 
				+
			
 
				+ReactDOM.createRoot(document.querySelector('#root')).render(element);
			
 
				+```
			
 
				+
			
 
				+
			
 
				+
			
 
				+### 4.1 事件对象
			
 
				+
			
 
				+> 在实际开发中，当某一事发生后开发者需要根据当前事件获取相关的信息数据。此时就需要找到事件对象。不同的事件，会创建不同事件对象，并且不同的事件对象包含的数据也不尽相同。
			
 
				+
			
 
				+那么怎么获取 事件对象 呢？默认情况下，JSX中注册所有监听器函数都会接收一个 事件对象 作为 唯一入参。因此在需要时在事件监听器函数中定义形参接收即可。
			
 
				+
			
 
				+```jsx
			
 
				+  // 事件监听的第一个参数 就是 事件对象
			
 
				+  function handleClick(e) {
			
 
				+    console.log(e);
			
 
				+    alert('你敢点我？？？');
			
 
				+  }
			
 
				+
			
 
				+  function handleChage(e) {
			
 
				+    // 每次文本改后将其打印出来
			
 
				+    console.log('changed:', e.target.value);
			
 
				+  }
			
 
				+
			
 
				+  function handleSubmit(e) {
			
 
				+    e.preventDefault(); // 取消默认行为
			
 
				+    alert('submited.');
			
 
				+  }
			
 
				+
			
 
				+  const element = (
			
 
				+    <div>
			
 
				+      {/**1 点击事件 **/}
			
 
				+      <button onClick={handleClick}>点我试试</button>
			
 
				+      {/**2 change事件 **/}
			
 
				+      {/* input元素的change事件 和原生的input事件 是一样的 */}
			
 
				+      <input type="text" onChange={handleChage} />
			
 
				+
			
 
				+      {/**3 submit事件 **/}
			
 
				+      <form onSubmit={handleSubmit}>
			
 
				+        <p>这旮瘩是表单</p>
			
 
				+        <button>提交</button>
			
 
				+      </form>
			
 
				+    </div>
			
 
				+  );
			
 
				+```
			
 
				 
			
 
				 
			
 
				-## 4. 事件处理
			
 
				 
			
 
				 ##  5. 组件
			
 
				 
			
--- a/20_React.js_VIP22/day-1/code/5.事件处理-注册事件.html
+++ b/20_React.js_VIP22/day-1/code/5.事件处理-注册事件.html
@@ -0,0 +1,54 @@
 
				+<!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>事件处理</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>
			
 
				+    <!-- 原生事件注册 -->
			
 
				+    <!-- <button id="btn">点我试试</button> -->
			
 
				+    <script type="text/babel">
			
 
				+      // 比如注册点击事件
			
 
				+      // 原生DOM实现
			
 
				+      // document.getElementById('btn').onclick = function () {
			
 
				+      //   alert('你敢点我？？？');
			
 
				+      // };
			
 
				+      // React中的实现
			
 
				+      function handleClick() {
			
 
				+        alert('你敢点我？？？');
			
 
				+      }
			
 
				+
			
 
				+      function handleChage() {
			
 
				+        console.log('changed');
			
 
				+      }
			
 
				+
			
 
				+      function handleSubmit() {
			
 
				+        alert('submit');
			
 
				+      }
			
 
				+
			
 
				+      const element = (
			
 
				+        <div>
			
 
				+          {/**1 点击事件 **/}
			
 
				+          <button onClick={handleClick}>点我试试</button>
			
 
				+          {/**2 change事件 **/}
			
 
				+          {/* input元素的change事件 和原生的input事件 是一样的 */}
			
 
				+          <input type="text" onChange={handleChage} />
			
 
				+
			
 
				+          {/**3 submit事件 **/}
			
 
				+          <form onSubmit={handleSubmit}>
			
 
				+            <p>这旮瘩是表单</p>
			
 
				+            <button>提交</button>
			
 
				+          </form>
			
 
				+        </div>
			
 
				+      );
			
 
				+
			
 
				+      ReactDOM.createRoot(document.querySelector('#root')).render(element);
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/20_React.js_VIP22/day-1/code/6.
+++ b/20_React.js_VIP22/day-1/code/6.
@@ -0,0 +1,57 @@
 
				+<!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>事件处理</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>
			
 
				+    <!-- 原生事件注册 -->
			
 
				+    <!-- <button id="btn">点我试试</button> -->
			
 
				+    <script type="text/babel">
			
 
				+      // 比如注册点击事件
			
 
				+      // 原生DOM实现
			
 
				+      // document.getElementById('btn').onclick = function () {
			
 
				+      //   alert('你敢点我？？？');
			
 
				+      // };
			
 
				+      // React中的实现
			
 
				+      function handleClick(e) {
			
 
				+        console.log(e);
			
 
				+        alert('你敢点我？？？');
			
 
				+      }
			
 
				+
			
 
				+      function handleChage(e) {
			
 
				+        // 每次文本改后将其打印出来
			
 
				+        console.log('changed:', e.target.value);
			
 
				+      }
			
 
				+
			
 
				+      function handleSubmit(e) {
			
 
				+        e.preventDefault(); // 取消默认行为
			
 
				+        alert('submited.');
			
 
				+      }
			
 
				+
			
 
				+      const element = (
			
 
				+        <div>
			
 
				+          {/**1 点击事件 **/}
			
 
				+          <button onClick={handleClick}>点我试试</button>
			
 
				+          {/**2 change事件 **/}
			
 
				+          {/* input元素的change事件 和原生的input事件 是一样的 */}
			
 
				+          <input type="text" onChange={handleChage} />
			
 
				+
			
 
				+          {/**3 submit事件 **/}
			
 
				+          <form onSubmit={handleSubmit}>
			
 
				+            <p>这旮瘩是表单</p>
			
 
				+            <button>提交</button>
			
 
				+          </form>
			
 
				+        </div>
			
 
				+      );
			
 
				+
			
 
				+      ReactDOM.createRoot(document.querySelector('#root')).render(element);
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/20_React.js_VIP22/day-1/note/事件对象.png
+++ b/20_React.js_VIP22/day-1/note/事件对象.png
--- a/20_React.js_VIP22/day-1/note/事件对象的原型.png
+++ b/20_React.js_VIP22/day-1/note/事件对象的原型.png