1. 事件代理介绍
事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上，通过判断事件来源，执行相应的子元素的操作，事件代理首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
事件冒泡代码:
<script> $(function(){ var $div1 = $('#div1'); var $div2 = $('#div2'); $div1.click(function(){ alert($(this).html()); }); $div2.click(function(){ alert($(this).html()); }); }); </script> <div id="div1" style="width:200px; height:200px; background: red;"> <div id="div2" style="width:100px; height:100px;background: yellow;"> 哈哈 </div> </div>
说明:
当点击子元素div，它的点击事件会向它父元素传递，也会触发了父元素的点击事件，这就是事件冒泡。
2. 事件代理的使用
一般绑定事件的写法:
$(function(){ $ali = $('#list li'); $ali.click(function() { $(this).css({background:'red'}); }); }) <ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
事件代理的写法
$(function(){ $list = $('#list'); // 父元素ul 来代理 子元素li的点击事件 $list.delegate('li', 'click', function() { // $(this)表示当前点击的子元素对象 $(this).css({background:'red'}); }); }) <ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
delegate方法参数说明:
delegate(childSelector,event,function)
- childSelector: 子元素的选择器
- event: 事件名称，比如: 'click'
- function: 当事件触发执行的函数
3. 小结
- 事件代理就是使用父元素来代理子元素的事件，好处是减少事件的绑定次数，提高性能。
- 使用场景当多个相同的子元素绑定同一个事件，可以使用事件代理。
- 事件代理使用是使用delegate方法来完成
