慕课网《前端JavaScript面试技巧》学习笔记（7）-事件

1.编写一个通用的事件监听函数
2.描述事件冒泡流程
3.对于一个无限下拉加载图片的页面，如何给每个图片绑定事件

知识点#####

• 通用事件绑定

//标准方法
var btn=document.getElementById('btn1')
btn.addEventListener('click',function(e){
  console.log('clicked');
})
//封装事件绑定
  function myBindEvent(elem,type,fn){
  elem.addEventListener(type,fn)
}
var a=document.getElementById('link1')
myBindEvent(a,'click',function(e){
  e.preventDefault()  //阻止默认行为
  alert('link1 has clicked')
})

IE低版本使用attachEvent绑定事件，和W3C标准不一样

• 事件冒泡

    <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>
    <script type="text/javascript">
      function myBindEvent(elem,type,fn){
        elem.addEventListener(type,fn)
      }
      var p1=document.getElementById('p1')
      var body=document.body
      myBindEvent(p1,'click',function(e){
        e.stopPropagation()    //阻止冒泡
        alert('激活')
      })
      myBindEvent(body,'click',function(e){
        alert('取消')
      })
    </script>

点击p1，弹出激活，如果没有e.stopPropagation()，事件将继续向上冒泡找到body的alert('取消')

• 代理

<div id="div1">
      <a href="#">a1</a>
      <a href="#">a2</a>
      <a href="#">a3</a>
      <a href="#">a4</a>
      <!-- 会随时新增更多a标签 -->
    </div>
    <script type="text/javascript">
      function myBindEvent(elem,type,fn){
        elem.addEventListener(type,fn)
      }
      var div1=document.getElementById('div1')
      myBindEvent(div1,'click',function(e){
        var target=e.target    //获取要绑定事件的元素
        if(target.nodeName==='A'){
          alert(target.innerHTML)
        }
      })
    </script>

点击每一个a标签弹出对应的标签内的内容

解题#####

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

    function myBindEvent(elem,type,selector,fn){
      if(fn==null){
        fn=selector
        selector=null
      }
      elem.addEventListener(type,function(e){
        var target
        if(selector){
          // 代理
          target=e.target
          if(target.matches(selector)){ //判断目标节点是否和选择器匹配
            fn.call(target,e)
          }
        }else{
          // 不使用代理
          fn(e)
        }
      })
    }

    //使用代理
    var div1=document.getElementById('div1')
    myBindEvent(div1,'click','a',function(e){
      e.preventDefault()
      console.log(this.href);
    })

    //不使用代理
    var btn1=document.getElementById('btn1')
    myBindEvent(btn1,'click',function(e){
      console.log(btn1.innerHTML);
    })

2.描述事件冒泡流程

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

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