SOURCE

console 命令行工具 X clear

                    
>
console
function bindEvent (event,type,selector,fn){
  
   // 这样处理,可接收两种调用方式 bindEvent(div1, 'click', 'a', function () {...}) 和 bindEvent(div1, 'click', function () {...}) 这两种
  console.log(fn)
  if(fn==null){
    fn=selector;
    selector=null
  }
  var target;
  event.addEventListener(type,function(e){
   target=  e.target;
        // 有 selector 说明需要做事件代理
        // 获取触发时间的元素,即 e.target
    if(selector){
       // 看是否符合 selector 这个条件
      if(target.matches(selector)){
      fn.call(target,e)
    }
    }else{
      fn()
    }
  })
}

var div1 = document.getElementById('div1');
var btn1 = document.getElementById('btn');
i=4
bindEvent(btn1,'click',function(){
  var node=document.createElement("a");
  var textnode=document.createTextNode(`a${i++}`);
  node.appendChild(textnode);
  div1.appendChild(node)
})
bindEvent(div1,'click','a',function(){
  alert(this.innerHTML)
})
<div id="div1">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
</div>
<button id='btn'>点击增加一个 a 标签</button>