jquery中bind与on的区别

m0_53579196

已于 2023-04-17 19:48:45 修改

阅读量43

点赞数

文章标签：前端 jquery

于 2023-04-14 14:54:53 首次发布

本文链接：https://blog.csdn.net/m0_53579196/article/details/130153615

版权

文章讨论了JavaScript中事件绑定的两种常见方法——bind和on，强调了on方法在事件委托中的优势，特别是通过selector参数实现子元素的选择与过滤。事件委托利用冒泡原理，提高性能，避免了为大量子元素单独绑定事件的资源浪费。示例代码展示了如何使用on方法为<ul>元素的li子元素绑定点击事件。

摘要由CSDN通过智能技术生成

bind方法与on方法都是事件绑定，区别：事件委托
on方法多了一个selector方法，也就是子类选择器

事件委托就是子类的事情委托给父类的去做，而这就让我们想起了冒泡事件，是的，这的确是委托事件的原型，而我们的selector，则是判断是不是那个子元素触发的事件，如果不是，自然就忽略掉了

<ul>
    <li>第一个子元素<li/>
    <li>第二个子元素<li/>
    <li>第三个子元素<li/>
</ul>
<script>
	 $('ul').on('click','li', function () {   
	        console.log($(this).text());
	});
</script>