事件委托
利用事件冒泡的原理，将需要绑定的事件交给父元素来监听，实现如下:
html
// 有100个li节点<ul class="list-wrapper"> <li class="list-item"></li> * 100</ul>
javascript
var ul = document.querySelector('.list-wrapper');
ul. = function (e) { if (e.target.className = 'list-item') { // do somthing
}
}jquery
$('.list-wrapper').on('click', '.list-item', function () { // do somthing})事件委托的好处
性能好，你给100个li节点绑定同样的click事件好还是给1个ul标签绑定click事件好，可想而知.
不用担心动态添加的节点（未来元素）没有绑定到事件.
未来元素该怎么绑定事件
事件委托
<button =''></button>最傻逼的方法
<button>点击我</button><script>
$('button').on('click', doSomthing);
setTimeout(function () {
$('body').append('<button>点击我</button>');
$('button').off('click'); // 不移除的话之前的button会叠加click事件
$('button').on('click', doSomthing);
} , 500)</script>Jquery事件委托在IOS系统会失效!?
将事件委托给了document元素，具体绑定情况如下：
$(document).on('click', ".btn", function(){})PC端测试和安卓测试都正常，但是在IOS端缺失效了!根据H5新定义，默认可点击的元素有a标签和button标签，也就是给这两种标签进行事件委托是完全没有问题的。
解决办法:
给.btn加一个样式: cursor: pointer;
按照规定, 点击元素使用button或者a标签
把document换成.btn的父元素,前提是父元素不是跟随.btn一起动态添加进来的
作者：daydreammoon
链接：https://www.jianshu.com/p/ca4ebbd6c5c1
随时随地看视频
