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

事件委托

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

html

// 有100个li节点

  
 * 100

javascript

var ul = document.querySelector('.list-wrapper');
ul.onclick = 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事件好，可想而知.
• 不用担心动态添加的节点（未来元素）没有绑定到事件.

未来元素该怎么绑定事件

• 事件委托
• 最傻逼的方法

点击我

Jquery事件委托在IOS系统会失效!?

将事件委托给了document元素，具体绑定情况如下：

$(document).on('click', ".btn", function(){})

PC端测试和安卓测试都正常，但是在IOS端缺失效了!根据H5新定义，默认可点击的元素有a标签和button标签，也就是给这两种标签进行事件委托是完全没有问题的。

解决办法:

• 给.btn加一个样式: cursor: pointer;
• 按照规定, 点击元素使用button或者a标签
• 把document换成.btn的父元素,前提是父元素不是跟随.btn一起动态添加进来的

最后

本文到此结束，希望以上内容对你有些许帮助，如若喜欢请记得点个赞跟关注哦

image

微信公众号 「前端宇宙情报局」，将不定时更新最新、实用的前端技巧/技术性文章，欢迎关注，一起学习