事件代理

1.问题描述

事件代理_第1张图片
双击添加生词

双击文章栏目中的单词可以添加到生词栏目中,我们可以给每个单词添加一个dblclick事件,那么这里就存在给很多个元素添加相同事件的效率问题。

2.事件代理的理念

就像上面问题描述的一样,需要给每个单词都添加一个事件,这样效率太低,那有没有一个办法,我只给一个元素添加事件,但是在触发这个事件的时候也会映射到相应的单词上?答案是肯定的,这里我们就会引出另一个概念,事件冒泡和事件捕获,而所谓的事件代理也只是冒泡与捕获的一个应用!下面给出简单的例子:

事件代理_第2张图片
事件的捕获与冒泡行为

下面应用W3官网上的一张图


事件代理_第3张图片

事件代理的应用

事件代理_第4张图片
冒泡阶段使用事件代理


事件代理_第5张图片
捕获阶段使用事件代理

3.focus/blur以及focusin/focusout的区别

事件代理_第6张图片

从上图可以focusin/focusout支持事件冒泡,focus/blur不支持

你可能感兴趣的:(事件代理)