JQuery中的事件委托
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(委托)词;由于事件委托 都是子元素委托给了父元素,因此声明的是父级元素,不许要声明子元素;
推荐阅读
-
jquery的冒泡事件的阻止与允许(三种实现方法)
-
jquery中移除了live()和die(),新版事件绑定on()和off()的方法详解
-
分析了一下JQuery中的extend方法实现原理_jquery
-
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题_jquery
-
jQuery 中的ajax在没有获取php返回的值时,原来html的标签的值会是空白,怎么解决?
-
jquery验证表单中的单选与多选实例_jquery
-
jQuery遍历json中多个map的方法_jquery
-
jQuery中RadioButtonList的功能及用法实例介绍
-
jquery中的$(document).ready()与window.onload的区别_jquery
-
jquery 中的each()跳出循环的语句