From e6289a17824ee4445c99229599240a1798b18319 Mon Sep 17 00:00:00 2001
From: Rikako Wu <496063163@qq.com>
Date: Sat, 7 May 2022 01:54:30 +0800
Subject: [PATCH] daily commit

---
 javascript/js事件.md | 44 ++++++++++++++++++++++++++++++++++++++++++
 javascript/js异步.md |  3 +--
 2 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 javascript/js事件.md

diff --git a/javascript/js事件.md b/javascript/js事件.md
new file mode 100644
index 0000000..3cddcc4
--- /dev/null
+++ b/javascript/js事件.md
@@ -0,0 +1,44 @@
+# js事件
+- ## js event
+  - 对于可以触发事件的对象，其会有一个addEventListener方法，通过该方法，可以为对象的特定事件注册handler。addEvnetListener接受两个参数：
+    - event name
+    - event handler
+  - 对于js语言，在不同的环境下，event model可能会有所不同，例如在web浏览器环境下和nodejs环境下，event model就不完全相同
+  - 可以通过removeEventHandler来移除handler，该方法同样接收两个参数，event name和handler
+- ## 在js中为事件添加复数个handler
+  - 通过多次调用addEventHandler，可以为同一个事件添加多个handler，在事件发生后，多个handler都会被调用
+- ## Event Handler Properties
+  - 在js中，如果一个对象能够触发某个事件，通常该对象会有一个onxxx属性，例如onclick、onmouseover等。可以通过为该属性赋值一个函数来为该事件添加handler
+  ```javascript
+  let p=document.querySelector("#bt")
+  p.onclick=()=>{
+      alert("button is clicked")
+  }
+  ```
+  - 但是，通过为对象的onclick属性赋值，无法为该对象的同一个事件添加多个handler，对onclick属性的多次赋值，之后的赋值操作会覆盖前面的赋值操作
+- ## inline event handler（不推荐）
+  - 可以在html文件中为标签的onxxx属性指定调用的js方法来为事件添加handler，但是这种方法永远不应该被使用
+  - 使用inline event handler时，如果多个元素都为相同事件添加相同的handler，那么相同的函数调用代码将会在html文件中重复多次，修改会花费大量时间
+  - 并且，使用inline event handler会令js代码和html代码糅合在一起，最好将js代码和html代码分开
+- ## event对象
+  - handler的参数中可以含有一个event对象，用来记录触发事件的信息，例如event.target记录了指向触发事件的对象的引用
+  - 可以通过event.preventDefault()方法来取消浏览器为该事件定义的默认处理。
+  - 可以通过event.stopProgation()方法阻止该事件的传播
+  - 通过return false，默认会同时调用event.preventDefault和event.stopProgation
+- ## 事件传播的三个阶段
+  - capturing阶段：
+    - 捕获阶段首先会检查触发事件元素的最外层元素（html），检查其是否注册了capture阶段的handler，如果注册了就运行handler
+    - 然后其会移动到html内部元素并做相同的事情，如果元素有注册capture阶段handler就执行，并依次向内移动，直到遇到触发事件元素的直接父元素
+  - target阶段：
+    - 首先，target阶段会检查EventTarget是否有为event注册的handler，如果有就运行它
+    - 如果，event的bubbles为true，其会将event事件传播给EventTarget元素的父元素，并以此向上传播，直到到达html元素；如果bubbles为false，则event不会被向上传播给EventTarget的任何父元素
+  - bubbling阶段：
+    - 检查是否EventTarget的直接父元素为bubbling阶段注册了handler，如果有就运行
+    - 对EventTarget父元素的父元素做同样的事，检查是否为bubbling阶段注册有handler，如果有就执行，依次向上传播，直到到达html元素
+  - >对于所有的js事件，都会经历capturing阶段和target阶段，但是只有bubbles属性为true的事件才会经历bubbling阶段
+  - > 对于target阶段，对于EventTarget，无论是为capturing阶段注册的handler还是为bubbling阶段注册的handler都会被执行
+  - > addEventListener默认情况下注册的阶段是bubbling，可以为其制定useCapture为true(默认为false)来指定注册的listener为capturing阶段
+  - > 可以在event handler中调用event.stopPropagation来阻止事件在bubbling过程中向上传播
+- ## event.target和event.currentTarget
+  - event.target：触发事件的元素
+  - event.currentTarget：当前handler所附加到的元素（在bubbling阶段时间传播到的上层祖先节点）
\ No newline at end of file
diff --git a/javascript/js异步.md b/javascript/js异步.md
index 2b4bb62..90d833c 100644
--- a/javascript/js异步.md
+++ b/javascript/js异步.md
@@ -82,5 +82,4 @@ function fetch_baidu() {
  - ## Worker
    - 默认情况下，整个window是单线程的，如果在同步执行一个长任务的情况下，其他所有的操作都会被阻塞，可以开启多线程来来实现并行执行
    - async/await和promise并不是通过多线程来实现异步操作的，通过async和await并不会创建一个新的线程，故而想要通过多线程提高性能，不能通过简单使用await/promise来实现
-   - 为了保证线程安全，worker之间是隔离的，相互之间无法访问其他worker的变量，也无法访问dom（window、document、page），workder之间只能通过message交流
-   - 
\ No newline at end of file
+   - 为了保证线程安全，worker之间是隔离的，相互之间无法访问其他worker的变量，也无法访问dom（window、document、page），workder之间只能通过message交流
\ No newline at end of file