js事件委托和jQuery事件绑定on , off , one , bind , unbind , die

71 阅读 0 评论 47 点赞

我是靠谱客的博主小巧砖头，这篇文章主要介绍js事件委托和jQuery事件绑定on , off , one , bind , unbind , die，现在分享给大家，希望可以做个参考。

一. 事件委托
什么是事件委托？用现实中的理解就是：有100 个学生同时在某天中午收到快递，但这
100 个学生不可能同时站在学校门口等，那么都会委托门卫去收取，然后再逐个交给学生。
而在jQuery 中，我们通过事件冒泡的特性，让子元素绑定的事件冒泡到父元素(或祖先元素)
上，然后再进行相关处理即可。
如果一个企业级应用做报表处理，表格有2000 行，每一行都有一个按钮处理。如果用
之前的.bind()处理，那么就需要绑定2000 个事件，就好比2000 个学生同时站在学校门口等
快递，不断会堵塞路口，还会发生各种意外。这种情况放到页面上也是一样，可能导致页面
极度变慢或直接异常。而且，2000 个按钮使用ajax 分页的话，.bind()方法无法动态绑定尚
未存在的元素。就好比，新转学的学生，快递员无法验证他的身份，就可能收不到快递。
//HTML 部分
<div style="background:red;width:200px;height:200px;" id="box">
<input type="button" value="按钮" class="button" />
</div>
//使用.bind()不具备动态绑定功能，只有点击原始按钮才能生成
$('.button').bind('click', function () {
$(this).clone().appendTo(&#