原生js动态绑定事件(事件委托)

<button id="add">add row</button>
<script>

document.getElementById('add').addEventListener('click', function() {
  var dom = document.body.firstChild;
  var newdom = document.createElement('div');
  newdom.innerHTML = '11111111111111111';
  document.body.insertBefore(newdom, document.body.firstChild);
});

// 动态添加事件
function liveEvent(el, type, name, callback) {

  function wrapEvent(e) {
    e = e || window.event;
    e.srcElement = e.srcElement || e.target;
    return e;
  }
    
  function handler (e) {
    e = wrapEvent(e);
    if (e.srcElement.nodeName.toLowerCase() === name) {
      callback.call(e.srcElement, e);
    }
  }

  if (el.addEventListener) {
    el.addEventListener(type, handler, false);
  }
  else if (el.attachEvent) {
    el.attachEvent('on' + type, handler, false);
  }
  else {
    el['on' + type] = handler;
  }
}

liveEvent(document.body, 'click', 'div', function(e) {
  this.parentNode.removeChild(this);
});

</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容