站长  发布于 2024-03-21 22:43:24  阅读(1149)  点赞(9)  评论(0)

     通过事件委托,可以实现事件预绑定。事件委托,即将本该注册到子元素上的事件注册到父元素上,其原理是事件冒泡。事件冒泡就是当前元素触发的事件会一级一级地向上传递,如果父级有这个事件,就会触发,没有就不触发,其实父级没有注册这个事件,也会传递的,只是不触发而已。事件预绑定: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,也会拥有这个单击弹出事件。

评论列表
发表评论
请填写昵称