js面试问题

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标准不一样
事件冒泡

激活

取消

取消

取消

取消

取消

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

a1 a2 a3 a4

点击每一个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.对于一个无限下拉加载图片的页面，如何给每个图片绑定事件
使用代理