事件委托

• 事件委托是通过事件冒泡的原理，利用父级去触发子级的事件
• 如下html，如果不用事件委托，将每一个li都去添加click事件监听，非常麻烦
• 另外就是如果通过js动态创建的子节点，需要重新绑定事件
• 而利用事件委托的话，只需要给父级绑定一个事件监听，即可让每个li都绑定上相应的事件

HTML结构

<ul id="wrap">    <li>item1</li>    <li>item2</li>    <li>item3</li>    <li>item4</li>    <li>item5</li></ul>

JS原生写法

let wrap = document.getElementById('wrap');wrap.addEventListener('click', function(ev){    if( ev.target.nodeName == 'LI' ) {          ev.target.style.color = 'red';          ev.target.style.fontSize = '30px';          console.log( ev.target.innerHTML );     }    this.style.border = '2px solid green';},true);

jQuery写法

$('#wrap').delegate('li', 'click', function(ev){        $(this).css({color:'red',fontSize:'30px'});        console.log( $(this).text() );        $(ev.delegateTarget).css('border', '2px solid green');    });