73. python高级------jQuery(6)
python修炼第二十一天
2019年 4月 20日 晴
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>
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
: 当事件触发执行的函数