美文网首页
事件代理

事件代理

作者: 无名侠女 | 来源:发表于2018-06-14 09:51 被阅读0次

1.问题描述

双击添加生词

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

2.事件代理的理念

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

事件的捕获与冒泡行为

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

事件代理的应用

冒泡阶段使用事件代理 捕获阶段使用事件代理

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

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

相关文章

  • 第二十天web前端面试题

    1,什么是事件代理且描述事件代理的原理及为什么要用事件代理? 事件委托也叫事件代理。利用事件冒泡,让自己的触发的事...

  • 概念

    事件委托,事件代理 事件代理又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义,“事件代理...

  • Block和代理协议

    代理协议: 1.要确定谁是代理对象,谁是被代理对象。 事件在哪里产生,谁就被代理对象。 事件在哪里响应,谁就是代理...

  • dom事件代理

    实现一个js事件代理的模块,帮助用户快速实现事件代理。

  • 【事件代理】 动态数据列表里,如何监听每条数据的点击?

    前言 在问题前,需要先清楚关于事件冒泡、事件代理的定义 事件冒泡 事件代理 原理: 事件冒泡机制实现方式:可用ad...

  • 前端面试题套路

    套路一:事件代理 1、事件代理基本原理 事件代理的基本原理简单来说就是将子元素的事件通过冒泡的形式交由父元素来执行...

  • 事件代理

    1.问题描述 双击文章栏目中的单词可以添加到生词栏目中,我们可以给每个单词添加一个dblclick事件,那么这里就...

  • 事件代理

    javascript和jQuery的事件代理不同写法 首先思考一下:为什么我们要用到事件代理??? 举个栗子父元素...

  • 事件代理

    简单情况的事件代理写法 假设是这个么结构,然后现在要监听的是 父容器 ul : 那么我们的监听代码可以这么写: 点...

  • 事件代理

    事件代理(事件委托):利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。 事件委托就是利用冒泡...

网友评论

      本文标题:事件代理

      本文链接:https://www.haomeiwen.com/subject/pgfseftx.html