update

TYRMars · TYRMars · commit ef08f67e6269 · 2017-07-16T15:47:58.000+08:00
diff --git a/README.md b/README.md
@@ -1155,18 +1155,116 @@ history.forward();
 ```
 
 ## 05-01
-### 事件-知识点
-* 编写一个通用的事件监听函数
-* 描述事件冒泡流程
-* 对于一个无线下拉加载图片的页面，如何给每个图片绑定事件
-#### 知识点
-* 通用事件绑定
+#### 编写一个通用的事件监听函数
+#### 描述事件冒泡流程
+    * DOM树形结构
+    * 事件冒泡
+    * 阻止冒泡
+    * 冒泡的应用
+#### 对于一个无线下拉加载图片的页面，如何给每个图片绑定事件
+    * 使用代理
+    * 知道代理的有点
+
+##### 通用事件绑定
+
 ```JavaScript
 var btn = document.getElementById('btn1');
-btn.
+btn.addEventListener('click',function (event) {
+  console.log('clicked');
+})
+
+function bindEvent(elem,type,fn) {
+  elem.addEventListener(type,fn);
+}
+var a = document.getElementById('link1')
+bindEvent(a,'click',function(e){
+  e.preventDefault(); //阻止默认行为
+  alert('clicked');
+});
+```
+
+* 关于IE低版本的兼容性
+    * IE低版本使用attachEvent绑定事件，和W3C标准不一样
+    * IE低版本使用量非常少，很多网站早已不支持
+    * 建议对IE低版本的兼容性：了解即可，无需深究
+    * 如果遇到对IE低版本要求苛刻的面试，果断放弃
+
+#### 事件冒泡
+
+```html
+<body>
+  <div id="div1">
+    <p id="p1">激活</p>
+    <p id="p2">取消</p>
+    <p id="p3">取消</p>
+    <p id="p4">取消</p>
+  </div>
+  <div id="div2">
+    <p id="p5">取消</p>
+    <p id="p6">取消</p>
+  </div>
+</body>
+```
+
+```JavaScript
+var p1 = document.getElementById('p1');
+var body = document.body;
+bindEvent(p1,'click',function (e) {
+  e.stopPropatation();
+  alert('激活');
+});
+bindEvent(body,'click',function(e){
+  alert('取消');
+})
+```
+
+#### 代理
+```html
+<div id="div1">
+  <a href="#">a1</a>
+  <a href="#">a2</a>
+  <a href="#">a3</a>
+  <a href="#">a4</a>
+  <!-- 会随时新增更多a标签 -->
+</div>
+```
+```JavaScript
+var div1 = document.getElementById('div1');
+div1.addEventListener('click',function (e) {
+  var target = e.target;
+  if (target.nodeName === 'A') {
+    alert(target.innerHTML);
+  }
+})
+```
+#### 完善通用绑定事件的函数
+
+```JavaScript
+//使用代理
+var div1 = document.getElementById('div1');
+bindEvent(div1,'click','a',function (e) {
+  console.log(this.innerHTML);
+})
+```
+
+```JavaScript
+function bindEvent(elem,type,selector,fn) {
+  if (fn == null) {
+    fn = selector;
+  }
+  elem.addEventListener(type,function (e) {
+    var target;
+    if (selector) {
+      target = e.target;
+      if (target.matches(selector)) {
+        fn.call(target,e);
+      }
+    }else {
+      fn(e);
+    }
+  })
+}
 ```
-* 事件冒泡
-* 代理
 ---
 
 ### JSDemo JS小程序
