Javascript事件委托和一个遇到的BUG!?

事件委托

利用事件冒泡的原理，将需要绑定的事件交给父元素来监听，实现如下:

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