纯属借鉴别人博客，请各位勿喷，嘿嘿
假如现在有一个无序列表，需要在点击具体列表项时，于控制台打印该项的HTML内容。思路是：想办法为DOM元素绑定事件 -> 获取元素HTML -> 输出到控制台。
<ul class="list">
<li class="list-item">1</li>
<li class="list-item">2</li>
...
</ul>
差劲的事件绑定
<ul class="list">
<li class="list-item" onclick="handler(this)"></li>
<li class="list-item" onclick="handler(this)"></li>
...
</ul>
不错的事件绑定：获取元素集合并绑定事件
$('.list-item').on('click', function() { // 获取元素集合并绑定事件
console.log($(this).html());
};
这次做到了JS和HTML的分离，先获取元素集合，再利用jquery的事件绑定方法on()，解决浏览器事件API的差异问题。
思考：
如果有100个列表项的话，jquery就会遍历100次，为匹配的元素集合都绑定一个click事件。
光这100次遍历和绑定操作，就是件非常消耗资源的事情。
再加上由于创建太多的事件监听，也会对页面性能有影响。
更好的事件绑定：利用冒泡机制监听父元素
$('.list').on('click', 'li', function(event) { // 绑定事件到父节点
console.log($(event.target).html()); // 注意操作对象是event.target还是this，下面会有详细说明哦
});
注意点&细节解析：
使用on()方法的筛选器
这里用到了on()方法的第二个参数，这个参数是个筛选器，例如li，>li，.list-item，li.list-item等。
当检测到点击事件是由这个筛选器匹配的元素传来的，就触发这个父节点的click事件回调函数。
筛选器没有用.list-item而是li
因为如果把css类作为筛选器的话，jquery在执行时要把每个event.target的class属性去查一查，然后拆分后看看是不是有叫list-item。判断步奏多了很多。
本示例中，只使用li来筛选就已经满足我们的需求了，优化要从细节开始哦。
注意回调函数中操作的是this还是event.target
因为当前是在父元素中绑定的事件，所以this默认指向的是父元素，并不是我们的列表项。
但是这里要强调一点：如果使用on()方法中的筛选器自动筛选的话，jquery也会自动帮我们把this指向改成event.target，这时候this和event.target都同样指向的是列表项了，两个都可以用哦。
如果不使用jquery在on()方法中提供的筛选器的话，也可以自己去判断冒泡过来的是不是li：
$('.list').on('click', function(event) {
if (event.target.tagName === 'LI') { // 判断标签是不是li，注意tagName属性返回的是大写
console.log($(event.target).html());
}
});
建议使用event.target，避免混淆，也可以让代码更加清晰啦。
这样子无论是用on()方法的自动筛选，还是直接自己写代码判断，都可以统一使用event.target来获取冒泡阶段传播到此的具体列表项，我们就可以开心的去操作它啦。
网友评论