对于jQuery中的事件绑定方法，主要有on()、bind()、delegate()、live()等这几个方法。之前都是之前拿过来用，也知道有这么几个方法，但是不清楚这几个事件绑定方法之间的区别。平时用的最多的是on方法，今天打算整理一下。
bind方法
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>bind事件绑定</title></head><body><div> <button id="btn">添加新的p元素</button> <p>第一个p元素</p> <p>第二个p元素</p> <p>第三个p元素</p> <p>第四个p元素</p> <p>第五个p元素</p></div><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script type="text/javascript">//点击添加一个新的元素$("#btn").click(function(){ $("div").append("<p>这是一个新的p元素</p>");});//给所有的p元素绑定点击事件$("div p").click(function(){ alert($(this).text());});</script></body></html>这种绑定事件的方式缺点：
当页面上p元素特别多的时候，会导致页面上存在大量的事件处理程序，导致页面性能差；
对于动态生成的新元素，不具有点击事件。
对于这两个缺点，我们可以通过下面即将要介绍的delegate方法来解决。
delegate方法
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>jQuery事件绑定</title></head><body><div> <button id="btn">添加新的p元素</button> <p>第一个p元素</p> <p>第二个p元素</p> <p>第三个p元素</p> <p>第四个p元素</p> <p>第五个p元素</p></div><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script type="text/javascript">$("#btn").click(function(){ $("div").append("<p>这是一个新的p元素</p>");});$("div").delegate("p", "click", function () { alert($(this).text());});</script></body></html>上面的例子中我们使用事件委托的原理，利用delegate来绑定事件。
不直接为p元素绑定事件，而是为其父元素（或祖先元素）绑定事件，当在div内任意元素上点击时，事件会一层层从event target(目标元素)向上冒泡，直至到达你为其绑定事件的元素，如此例中的div元素。冒泡的过程中，如果事件的currentTarget与选择器匹配时，就会执行代码。
这样就解决了用bind()方法的上面两个问题，不用再一个个地去为p元素绑定事件，有效减少了页面上事件处理程序数量，也可以为动态添加进来的p元素绑定事件。
新闻热点
疑难解答
图片精选
