在线客服
扫描二维码
下载博学谷APP扫描二维码
关注博学谷微信公众号
事件代理如何使用?代码怎么写?事件代理就是把一个元素响应事件(click、keydown…)的函数委托到另一个元素。在 JavaScript中的事件委托又称事件代理,事件委托就是利用事件冒泡,只指定一个事件处理程序管理某一类型的所有事件。
学习目标:能够知道事件代理的使用方式
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'
unction: 当事件触发执行的函数
3. 事件代理小结
事件代理就是使用父元素来代理子元素的事件,好处是减少事件的绑定次数,提高性能。场景当多个相同的子元素绑定同一个事件可以使用事件代理。事件代理使用是使用delegate方法来完成
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
如何快速实现爬虫从入门到精通
爬虫技术是现在互联网最常用的技术手段之一,甚至很多公司设置专门的爬虫工程师。而且爬虫工程师的薪资水平已经达到10-30K之间。掌握爬虫技术就为自己未来职业发展增加了一项必要的技能。那跨行业,或者零基础的情况下,如何快速实现爬虫从入门到精通水平呢?
6928
2019-07-24 18:34:32
为什么Python编程语言应用如此广泛?
很多人都知道Python是一门简单易学、应用广泛的编程语言。但是大家是否真的明白为什么它能够简单易学?为什么能够应用广泛吗?同为编程语言,为什么Python更适合实现自动化运维?为什么Python能够实现科学计算?为什么Python是人工智能的首选语言?带着这些疑问,小编为大家揭秘Python为什么应用如此广泛?
5762
2019-11-12 17:27:00
从事数据科学Python和R语言学哪个好?
从事数据科学Python和R语言学哪个好?答案肯定是学Python更好,当然也不是就完全否定了学习R语言的作用和意义。只是和R语言比较起来,Python的优势更加明显。首先,Python应用场景更加广泛,且上手简单,在数据处理方面有着强大的能力。因此,如果是从事数据科学的朋友,选择学习Python会更好。
4567
2020-02-21 18:52:17
Python语言的应用领域主要有哪些?
我们为什么要学 Python?地产大佬潘石屹曾在微博回答过:在这信息时代想要让机器为人工作,就必须学习机器的语言,而Python就是进化后最好的计算机语言。总的来讲,Python绝对是近年最火的编程语言。TIOBE于2020年3月公布的编程语言排行榜,Python 位居前三。追其根本,就是因为Python广泛的应用领域。下面我们一起来看看“Python语言的应用领域主要有哪些”。
4116
2020-08-07 16:02:18
多任务版静态Web服务器程序怎么写?
多任务版静态Web服务器程序怎么写?在Web服务器不支持多用户同时访问时,只能一个一个的处理客户端的请求,而多任务版的web服务器可以同时处理多个客户端的请求,使用多线程比进程更加节省内存资源。
2203
2021-12-22 09:54:44