在线客服
扫描二维码
下载博学谷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吗?不一定,如果大家会C/C++也可以不学Python,但是使用Python的脚本语言更加简单,所以为什么不使用更加轻松的编程语言呢?而且Python也是科学计算和数据分析的重要工具,学人工智能先学Python,也可以方便初学者。博学谷为此专门开设了Python+人工智能在线就业班课程,有兴趣学习人工智能的同学可以了解一下该课程。
6931
2019-08-21 14:41:48
自学Python要按照什么样的学习顺序?
自学Python要按照什么样的学习顺序?首先要有一个详尽的学习大纲,对于学习Python的各种知识点要安排的详略得当,做到由易到难,循序渐进,才能长久的坚持学下去。除了基础的理论知识,项目实战也是自学Python必不可少的环节。下面小编来和大家详细讲讲自学Python的路线,感兴趣的小伙伴赶紧接着往下看吧!
11764
2019-10-30 20:10:39
Lambda函数的语法结构解析
说到Lambda函数的语法结构,我想问大家一个问题,什么是Lambda表达式?众所周知,Lambda表达式是一个匿名函数,简单来讲就是没有函数名的函数,它还可以表示闭包。Lambda函数的出现简化了代码,它的语法结构可以这样写:(variable)->action。下面将详细为大家解析Lambda函数的语法结构,感兴趣的朋友可以接着看下去。
6444
2020-01-14 14:35:43
自学Python三个月能赚钱吗?
自学Python三个月能赚钱吗?如果有一定的计算机编程基础并有一定的开发经验,自学Python三个月具备相应的岗位技能是可以找到一份工作获得报酬,如果是零基础的小编自学2个月就想达到就业能力,通常来说不太现实。
6220
2020-05-15 15:38:48
装饰器的作用及使用方法是什么?
装饰器的作用及使用方法是什么?外层函数返回里层函数的引用,里层函数引用外层函数的变量。装饰器在不改变已有函数源代码及调用方式的前提下对已有函数进行功能的扩展,通过我们需要学习掌握装饰器的作用及代码。
3724
2021-12-06 13:51:46