通过事件委托,可以实现事件预绑定。事件委托,即将本该注册到子元素上的事件注册到父元素上,其原理是事件冒泡。事件冒泡就是当前元素触发的事件会一级一级地向上传递,如果父级有这个事件,就会触发,没有就不触发,其实父级没有注册这个事件,也会传递的,只是不触发而已。事件预绑定:1、可给未加载的前端对象预绑定事件;2、对于大量DOM对象需要绑定事件的通过将事件绑定在父对象,减少绑定事件。
通过jQuery中的.on()方法实现预绑定:
一般的绑定事件的jQuery代码:
$('#root').find('#test').on('click',function(){ ... });
预绑定的jQuery代码,对ID为test2的DOM元素对象进行预绑定click事件:
$('#root').on('click','#test2',function(){ ... });
如下列表要给li绑定事件:
<ul id="list"> <li>1<li> <li>22<li> <li>333<li> <li>4444<li> <li>55555<li> <li>666666<li> <li>7777777<li> <li>88888888<li> <li>999999999<li> </ul>
普通的绑定方式需要给每个li都绑定事件,这样做有两个弊端:
1.很耗费资源,因为这种方式是给每个li都加上了事件,li的个数少的话还好,如果li多的话会很耗费资源;
2.如果后期动态添加li,不会拥有这个弹出事件,如果再次对li进行绑定事件,之前已绑定事件的可能会重复绑定多次事件。
通过预绑定可轻松解决:
$('#list').on('click','li',function(){ alert('hello world!'); });
或者:
$(document).on('click','#list li',function(){ alert('hello world!'); });
通过预绑定事件后,即使后期动态添加了li,也会拥有这个单击弹出事件。
点赞(9)
请不要重复点赞
评论列表