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