js事件委托处理dom

事件委托就是根据事件冒泡原理，用父级来触发子级的事件。

利用事件委托可以解决多个兄弟节点绑定问题，动态创建的html事件绑定问题等。

一、多个兄弟节点事件绑定

例如，给ul下的li添加事件：

<ul id="wrap">

  <li>item1</li>

  <li>item2</li>

</ul>

$(function(){

  //普通事件

  $( 'li' ).click(function(){$(this).css('background','red')})

扫描二维码关注公众号，回复： 1555399 查看本文章

  //动态添加dom节点

 $('#addBtn').click(function(){$('#wrap).append($('<li>item'+($('li').length+1)+'</li>'))})

  //jquery的delegate写法

  $('#wrap').delegate('li', 'click',function(e){$(this).css('background','red'); $(e.delegateTarget).css('border', '2px solid red')})

  //jquery的on写法

  $('#wrap').on('click','li',function(e){$(this).css('background','red');$(e.delegateTarget).css('border','2px solid red')})

  //js原生写法

  var _wrap = document.getElementById('wrap');

  _wrap.addEventListener('click',function(e){

    var e = e || event;

    if( e.target.nodeName == 'LI' ) {

      e.target.style.background = 'red';

    }

    this.style.border = '2px solid red';

  }

});

二、给动态创建的html绑定事件

$(document).on('click','#wrap li',function(){});