update: readme

2019-11-12 20:49:09 +08:00
parent 43247d22d1
commit 00cf042dd2
3 changed files with 25 additions and 10 deletions
--- a/04-JavaScript基础/27-事件的绑定和事件对象Event.md
+++ b/04-JavaScript基础/27-事件的绑定和事件对象Event.md
@@ -21,7 +21,7 @@
 <script>
    var btn = document.getElementsByTagName("button")[0];

-    //这种事件绑定的方法容易被层叠。
+    //这种事件绑定的方式，如果绑定多个，则后面的会覆盖掉前面的
    btn.onclick = function () {
        console.log("事件1");
    }
@@ -41,7 +41,7 @@
 事件2
 ```

-我们可以看到，这种绑定事件的方式，会层叠掉之前的事件。
+我们可以看到，`DOM对象.事件 =  函数`的这种绑定事件的方式：一个元素的一个事件只能绑定一个响应函数。如果绑定了多个响应函数，则后者会覆盖前者。

 ### DOM2的写法：addEventListener

@@ -54,9 +54,9 @@

 参数解释：

- 参数1：事件名(注意，没有on)
+- 参数1：事件名的字符串(注意，没有on)

- 参数2：事件名(执行函数)
+- 参数2：回调函数：当事件触发时，该函数会被执行

 - 参数3：**true表示捕获阶段触发，false表示冒泡阶段触发（默认）**。如果不写，则默认为false。【重要】

@@ -69,7 +69,7 @@
    var btn = document.getElementsByTagName("button")[0];

    // addEventListener: 事件监听器。 原事件被执行的时候，后面绑定的事件照样被执行
-    // 这种写法不会出现层叠。（更适合团队开发）
+    // 这种写法不存在响应函数被覆盖的情况。（更适合团队开发）
    btn.addEventListener("click", fn1);
    btn.addEventListener("click", fn2);

@@ -93,7 +93,14 @@
    事件2
 ```

-我们可以看到，这种绑定事件的方式，不会层叠掉之前的事件。
+我们可以看到，`addEventListener()`这种绑定事件的方式：
+
+- 一个元素的一个事件，可以绑定多个响应函数。不存在响应函数被覆盖的情况。
+
+- 事件被触发时，响应函数会按照函数的绑定顺序执行。
+
+- `addEventListener()`不支持 IE8 及以下的浏览器。在IE8中可以使用`attachEvent`来绑定事件（这里就不详细展开了）。
+

 ## 事件对象

--- a/04-JavaScript基础/29-事件委托.md
+++ b/04-JavaScript基础/29-事件委托.md
@@ -30,7 +30,7 @@

 但是，上面的做法过于消耗内存和性能。**我们希望，只绑定一次事件，即可应用到多个元素上**，即使元素是后来添加的。

-因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 `ul` 上，然后在执行事件的时候再去匹配判断目标元素。如下：
+因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 `ul` 上，然后在执行事件函数的时候再去匹配判断目标元素。如下：

 ```html
    <!DOCTYPE html>
@@ -67,7 +67,7 @@
    </body>
 ```

-上方代码，为父节点注册click事件，当子节点被点击的时候，click事件会从子节点开始**向上冒泡**。**父节点捕获到事件**之后，开始执行方法体里的内容：通过判断 e.target 拿到了被点击的子节点li。从而可以获取到相应的信息，并作处理。
+上方代码，为父节点注册 click 事件，当子节点被点击的时候，click事件会从子节点开始**向父节点冒泡**。**父节点捕获到事件**之后，开始执行方法体里的内容：通过判断 event.target 拿到了被点击的子节点`<a>`。从而可以获取到相应的信息，并作处理。

 换而言之，参数为false，说明事件是在冒泡阶段触发（子元素向父元素传递事件）。而父节点注册了事件函数，子节点没有注册事件函数，此时，会在父节点中执行函数体里的代码。