在线客服
扫描二维码
下载博学谷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方法来完成
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
Docker是什么?Docker大科普
Docker是什么?大家都清楚在现在这个时代,技术更新迭代发展很快,容器化技术更是发展的一个趋势,今天带大家认识一下应用容器引擎Docker。
6401
2019-07-23 18:52:17
6个技巧帮你提高Python运行效率
随着国内对人工智能领域发展的大力支持,Python编程语言成为国内使用增长率的最大的编程语言。越来越多的人加入Python的学习行列,企业对Python的使用也越来越普遍。Python能够让你在端时间内通过少量代码,实现大量的操作。这里小编整理了6个Python编程技巧,帮你提高Python的运行效率。
4562
2019-12-05 18:51:03
如何提高Pandas的运行速度?四大性能优化方法
Pandas作为数据分析的屠龙宝刀,毫不夸张的说,功能和优势都极其强大。像是支持GB数据处理,多样的数据清洗方法;支持多种开源可视化工具包,更加丰富的数据成果展示等等。因此如果能做好性能优化,就可以极大的提高Pandas的运行速度。本文为大家总结了四大优化Pandas性能的方法,感兴趣的朋友就赶紧看下去吧!
8249
2019-12-23 11:00:02
Python培训机构靠谱吗?Python培训机构怎么选?
近几年,网络浪潮涌起,而Python市场一直是人才稀缺。Python语言简单易学,就业前景广自然也获得了年轻人的青睐。Python培训机构靠谱吗?Python培训机构怎么选?是每位学习者的纠结点,那么一个合格的Python培训机构是什么样子的呢?跟随小编筛一筛。
3580
2020-01-09 09:43:47
Python基础学习笔记之数据类型
众所周知,在Python中,常用的数据类型有三种,分别是字符串、整数和浮点数。在Python基础学习的过程中,数据类型是初学者常常容易混淆的一个基础知识点,本文为大家详细总结了三种数据类型的概念、数据类型的查询以及更为复杂的数据转化。下面一起来看看数据类型的学习笔记吧~
3720
2020-04-16 14:15:20
热门文章
- 前端是什么
- 前端开发的工作职责
- 前端开发需要会什么?先掌握这三大核心关键技术
- 前端开发的工作方向有哪些?
- 简历加分-4步写出HR想要的简历
- 程序员如何突击面试?两大招带你拿下面试官
- 程序员面试技巧
- 架构师的厉害之处竟然是这……
- 架构师书籍推荐
- 懂了这些,才能成为架构师 查看更多
扫描二维码,了解更多信息
