jquery事件委托
1.什么是事件委托?
事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件。
通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。
2.比如以下代码:
<div class="left">
<ul>
<li><a href="">菜单项01</a></li>
<li><a href="">菜单项02</a></li>
<li><a href="">菜单项03</a></li>
<li><a href="">菜单项04</a></li>
<li><a href="">菜单项05</a></li>
</ul>
</div>
<div class="right">
<ul>
</ul>
</div>
<script>
$(function (){
$('.left>ul>li').click(function (){
$('.right>ul').append($(this))
})
$('.right>ul>li').click(function (){
console.log("====");
$('.left>ul').append($(this))
})
</script>
点击left里面的li元素添加到right里面,然后再点击right里面的li元素添加到left里面。(注意:right里面最开始是没有li元素的),所以从左边点到右边可以,可是从右边点到左边就不行。因为无法为还没有出现的元素绑定事件。
所以需要用到事件委托。
3.事件委托
$('.right>ul').on('click','li',function(){
$('.left>ul').append($(this))
})
为right内的ul绑定事件,点击里面添加进来的li元素就可以转移到左边了。