JQuery 中的事件委托
定义
事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新元素的子元素也可以拥有相同的操作。可以理解为生命一个全局标量,所有的子元素,都要执行我声明父元素的参数。
事件与事件委托代码对比
事件 <!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
<script>
$(function(){
$ali = $('#list li');
$ali.click(function() {
$(this).css({background:'red'});
});
})
</script>
</head>
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
事件委托 <!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
<script>
$(function(){
$ali = $('#list');
$ali.delegate('li','click',function(){
$(this).css({background:'red'});
})
})
</script>
</head>
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
易错点
事件委托,用delegate(委托)词;由于事件委托 都是子元素委托给了父元素,因此声明的是父级元素,不许要声明子元素;