事件代理如何使用?代码怎么写?事件代理就是把一个元素响应事件(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方法来完成
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
Lambda表达式在Python中的优点和缺点
学过python的人,相信都接触过Lambda表达式。本文就来谈谈Lambda表达式在Python中的优点和缺点。一方面,Lambda函数的减少了代码的行数,方便又简洁。另一方面,Lambda表达式有诸多限制,不能使用复杂逻辑。
7406
2019-08-12 10:47:38
Python for循环学习总结
for循环是Python的循环语句之一,它常用于遍历字符串、列表、元组、字典、集合等序列类型,逐个获取序列中的各个元素。小编将为大家总结for循环的学习知识点,主要包括:for循环语法、实例展示、循环使用else语句和for循环语句应用。
4231
2019-08-28 16:04:02
Python学习周期 学习Python要多久?
学习Python编程需要多长时间?首先我们需要明确一点,在互联网技术领域,技术始终在不断的迭代升级,只要进入IT行业就要时刻保持学习的状态,才能不被技术进步的车轮碾压。我们目前讨论的Python学习周期,主要是从应用层面,学习到一定程度,能达到就业水平的整个学习周期。
3043
2020-05-15 18:16:57
命令行启动动态绑定端口号静态Web服务器代码怎么写?
命令行启动动态绑定端口号静态Web服务器实现步骤:首先需要获取执行python程序的终端命令行参数,然后判断参数的类型,设置端口号必须是整型,最后给Web服务器类的初始化方法添加一个端口号参数,用于绑定端口号。
546
2021-12-24 10:43:31
拷贝文件夹cp和mv命令选项怎么使用?
拷贝文件夹cp和mv命令选项怎么使用?拷贝文件是我们办公文件中比较常用的命令,开发过程也需要掌握拷贝文件命令选项,今天我们就一起来学习一下。
519
2022-03-08 11:40:55
热门文章
- Kafka消息的分发流程是什么?
- 比较实用的大数据分析模型有哪些?
- Java原子操作之CAS原子指令学习
- 从后端开发转大数据开发怎么样?
- 30条实用MySQL优化法则
- 目前Java架构师现状如何?前景怎么样?
- 大数据行业现在工作好不好找?很难吗?
- 和行业大咖1V1免费聊IT,这是头一次!
- 人工智能如何入门学习?前景如何
- 未来互联网人才还稀缺吗?哪些技术方向热门? 查看更多
扫描二维码,了解更多信息
