update

TYRMars · TYRMars · commit f67c2b858a7a · 2017-10-19T21:39:54.000+08:00
diff --git a/Example/captrue.html b/Example/captrue.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+  </head>
+  <style media="screen">
+  #div1{
+    width: 300px;
+    height: 100px;
+    background: red;
+    color: #fff;
+    text-align: center;
+  }
+  </style>
+  <body>
+    <div id="div1" >
+      目标元素
+    </div>
+    <script type="text/javascript">
+      var ev =document.getElementById('div1');
+      window.addEventListener('click',function () {
+        console.log("window click");
+      },true);
+      document.addEventListener('click',function () {
+        console.log('document click');
+      },true);
+      document.documentElement.addEventListener('click',function () {
+        console.log('html click');
+      },true);
+      document.body.addEventListener("click",function () {
+        console.log('body click');
+      },true);
+      ev.addEventListener('click',function () {
+        console.log('ev click');
+      },true);
+      window.addEventListener('click',function () {
+        console.log("window click");
+      });
+      document.addEventListener('click',function () {
+        console.log('document click');
+      });
+      document.documentElement.addEventListener('click',function () {
+        console.log('html click');
+      });
+      document.body.addEventListener("click",function () {
+        console.log('body click');
+      });
+      ev.addEventListener('click',function () {
+        console.log('ev click');
+      });
+
+      var eve = new Event('test');
+      ev.addEventListener('test'.function () {
+        console.log('test');
+      });
+      ev.dispatchEvent(eve);
+    </script>
+  </body>
+</html>
diff --git a/README.md b/README.md
@@ -1296,6 +1296,50 @@ bindEvent(a,'click',function(e){
     * 建议对IE低版本的兼容性：了解即可，无需深究
     * 如果遇到对IE低版本要求苛刻的面试，果断放弃
 
+#### 冒泡与捕获
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+  </head>
+  <style media="screen">
+  #div1{
+    width: 300px;
+    height: 100px;
+    background: red;
+    color: #fff;
+    text-align: center;
+  }
+  </style>
+  <body>
+    <div id="div1" >
+      目标元素
+    </div>
+    <script type="text/javascript">
+      var ev =document.getElementById('div1');
+      window.addEventListener('click',function () {
+        console.log("window click");
+      },true);
+      document.addEventListener('click',function () {
+        console.log('document click');
+      },true);
+      document.documentElement.addEventListener('click',function () {
+        console.log('html click');
+      },true);
+      document.body.addEventListener("click",function () {
+        console.log('body click');
+      },true);
+      ev.addEventListener('click',function () {
+        console.log('ev click');
+      })
+    </script>
+  </body>
+</html>
+```
+
 #### 事件冒泡
 
 ```html
