在线客服
扫描二维码
下载博学谷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方法来完成
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
Python飞机大战实战项目案例
都说实践是检验知识掌握程度的最好测试。随着Python学习者的增长,越来越多的零基础入门课程让人眼花缭乱。虽然说基础理论的学习十分重要,但是如果仅仅只学习理论知识,也是远远不够的。飞机大战的项目实战可以说是python基础入门的最好课程之一,下面我们一起来看看博学谷上的Python飞机大战项目实战案例。
6324
2020-03-09 01:41:20
Python数据分析入门书籍推荐
在当下这个数据驱动的时代,毫不夸张的说各行各业的商业决策和运营管理都离不开数据分析,因此数据分析已经成为当前每个人的必备技能和加分项。对于许多初学者来讲,想要入门Python数据分析常常不知道从何下手。本文将为大家推荐一些适合零基础学习者阅读的Python数据分析入门书籍,感兴趣的话就接着看下去吧!
5286
2020-04-03 14:48:23
Python与C语言的区别是什么?
Python与C语言的区别:Python是由C语言实现,C语言是编译型语言,经过编译后生成机器码再运行,执行速度快不能跨平台,一般用于操作系统驱动等底层开发。Python是理解为解释型语言执行速度慢,由于Python虚拟机可以跨平台,Python高度集成适合于软件的快速开发。
6538
2021-03-12 16:46:44
Python进阶如何修改闭包内使用的外部变量?
Python进阶如何修改闭包内使用的外部变量?需要学习修改闭包内使用的外部变量所需要的关键字,掌握外部函数变量使用 nonlocal 关键字来完成代码运行。
3245
2021-12-03 17:22:54
MySQL数据库的基本使用之数据库
MySQL数据库的基本使用之数据库,数据库是存储和管理数据的仓库,数据按照一定的格式进行存储。数据库起到存储和管理数据的作用。
2760
2022-01-10 14:06:11