• 07-JavaScrpit-事件
    • DOM事件介绍
  • 编写一个通用的事件监听函数
    • 描述事件冒泡流程
    • 对于一个无限下拉加载图片的页面，如何给每个图片绑定事件
      • 通用事件绑定
    • 事件冒泡
    • 代理
    • 完善通用绑定事件的函数

    07-JavaScrpit-事件

    DOM事件介绍

    • 点击一个DOM元素
    • 键盘按一下一个键
    • 输入框输入内容
    • 页面加载完成

    编写一个通用的事件监听函数

    描述事件冒泡流程

    • DOM树形结构
    • 事件冒泡
    • 阻止冒泡
    • 冒泡的应用

    对于一个无限下拉加载图片的页面，如何给每个图片绑定事件

    • 使用代理
    • 知道代理的有点
    通用事件绑定
    1. var btn = document.getElementById('btn1');
    2. btn.addEventListener('click',function (event) {
    3.   console.log('clicked');
    4. })
    6. function bindEvent(elem,type,fn) {
    7.   elem.addEventListener(type,fn);
    8. }
    9. var a = document.getElementById('link1')
    10. bindEvent(a,'click',function(e){
    11.   e.preventDefault(); //阻止默认行为
    12.   alert('clicked');
    13. });

    事件冒泡

    1. <body>
    2.   <div id="div1">
    3.     <p id="p1">激活</p>
    4.     <p id="p2">取消</p>
    5.     <p id="p3">取消</p>
    6.     <p id="p4">取消</p>
    7.   </div>
    8.   <div id="div2">
    9.     <p id="p5">取消</p>
    10.     <p id="p6">取消</p>
    11.   </div>
    12. </body>
    1. var p1 = document.getElementById('p1');
    2. var body = document.body;
    3. bindEvent(p1,'click',function (e) {
    4.   e.stopPropatation();
    5.   alert('激活');
    6. });
    7. bindEvent(body,'click',function(e){
    8.   alert('取消');
    9. })

    代理

    1. <div id="div1">
    2.   <a href="#">a1</a>
    3.   <a href="#">a2</a>
    4.   <a href="#">a3</a>
    5.   <a href="#">a4</a>
    6.   <!-- 会随时新增更多a标签 -->
    7. </div>
    1. var div1 = document.getElementById('div1');
    2. div1.addEventListener('click',function (e) {
    3.   var target = e.target;
    4.   if (target.nodeName === 'A') {
    5.     alert(target.innerHTML);
    6.   }
    7. })

    完善通用绑定事件的函数

    1. //使用代理
    2. var div1 = document.getElementById('div1');
    3. bindEvent(div1,'click','a',function (e) {
    4.   console.log(this.innerHTML);
    5. })
    1. function bindEvent(elem,type,selector,fn) {
    2.   if (fn == null) {
    3.     fn = selector;
    4.   }
    5.   elem.addEventListener(type,function (e) {
    6.     var target;
    7.     if (selector) {
    8.       target = e.target;
    9.       if (target.matches(selector)) {
    10.         fn.call(target,e);
    11.       }
    12.     }else {
    13.       fn(e);
    14.     }
    15.   })
    16. }