在线客服
扫描二维码
下载博学谷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成为热门编程语言的原因,由于Python简单易学功能强大,可以适用于各种开发环境,一门语言可走遍打天下,比较适合初学者入门。
7956
2019-10-10 17:20:23
Python自学教材推荐 初学者必看
Python是一种面向对象、解释性的高级程序语言,它已经被应用在众多领域,因此学习Python变得越来越有必要。传智播客针对编程零基础的初学者,编著出版了高质量的Python自学教材——《Python快速编程入门》。下面我将把这本书推荐给大家,大家可以详细了解一下该书的具体内容。
5769
2020-04-15 15:19:03
Python编程在线学习难不难?
Python编程在线学习难不难?其实Python对于编程零基础的初学者来说,已经是十分简单易学的编程语言了,尤其比起C语言和Java这样的编程语言,它的学习难度要小得多。至于许多人担心线上学不好Python,就要看大家怎么学了。如果只是随便在网上东找一点,西找一点免费的学习资料,学再久也难免抓不住重点。这里建议大家了解一下博学谷的Python在线就业班的课程,能够带给大家更完善的线上教学服务。
5082
2020-05-26 10:27:02
处理多个异常的三大方法
大部分Python初学者可能还不会处理多个异常,本文将向大家展示一下处理多个异常的三大方法。一种是把所有可能发生的一场都放在一个元组里,第二种是对每个单独的异常在单独的except语句块中处理,第三种方法会捕获所有异常。下面一起来看看具体的处理方法吧!
5604
2020-06-30 10:02:25
Python lambda表达式学习总结
lambda表达式是⼀⾏函数,它们在其他语⾔中也被看做是没有具体名称的匿名函数。lambda表达式非常有用,它可以让代码更加简洁。如果你不想在程序中对⼀个函数使⽤两次,或许你会想⽤lambda表达式,它们和普通的函数完全⼀样。下面我们一起来看看lambda表达式的原型、代码案例、列表排序、列表并⾏排序以及lambda表达式的优劣吧!
5260
2020-06-30 12:03:41