事件委托是利用事件冒泡机制的一种优化手段,如果有很多列表元素要绑定事件,那么就可以用事件委托来优化(不需要给每个元素都绑定事件)。但是对于focus这种特殊的表单事件,它不会冒泡,那么又该如何实现这一优化呢?有的人会说这个会同时触发click,但是如果我是通过tab切换呢?

js事件机制

js的事件机制有两种,事件冒泡和事件捕获,冒泡呢就是从触发事件的节点开始一层一层的往父节点传播;而事件捕获恰恰相反,是从根节点(document)往子节点中传播。

dom事件

1.DOM0级事件处理

dom.onclick = function(){//code}

这些事件会在事件冒泡阶段来处理,注意绑定事件必须要再dom节点存在之后。在函数中this关键字将指向目标元素,可以通过this访问所有的属性、方法。

删除绑定事件:直接重新绑定事件即可。

2.DOM2级事件处理

主要使用addEventListener/removeEventListener

dom.addEventListener(type, fn, option)

这里基本就是三个参数,第一个表示事件类型(click...),第二个事件处理函数,这个函数默认有个参数event,可以通过参数event获取一些信息,也可以通过this来获取,第三个就有些区别了可以是一个对象,也可以是一个boolean。

如果是个对象的时候:

options{
capture:Boolean //表示会在捕获阶段传播到该EventTarget上执行。
once:Boolean//表示只调用一次
passive:Boolean //表示listener永远不会调用preventDefault.默认是false,但是监听touch等事件chrome54之后版本会自动转为true。
}

如果是一个Boolean时,表示是否在捕获阶段处理事件。

解除绑定要注意,函数必须要和之前绑定的要一致,这里的一致是指向一致,并不是写成一样的就可以,函数是引用类型,所以通过变量来处理即可。

let fn = function (){}
//绑定
obj.addEventListener('click', fn, false)
//解除
obj.removeEventListener('click', fn, false)

当然对于IE8及一下需要用attachEvent/detachEvent来处理,不同点就在于只有两个参数,第一个参数同样是事件类型,但是要加上'on',第二个就是处理函数,没有第三个参数因为它支持事件冒泡。

函数中的参数event有很多属性方法,其中eventPhase可以判断事件的触发情况,1表示捕获,2表示处于目标,3表示冒泡,而一个完整的事件流程大致就是捕获->事件目标->冒泡

通过上面的知识我们很容易就想到在捕获阶段去获取事件就可以实现事件委托的效果。

parentObj.addEventListener('focus', fn, true)

focus如何实现事件委托的更多相关文章

  1. focus、blur事件的事件委托处理(兼容各个流浏览器)

    今天工作中遇到个问题,问题是这样的,一个form表单中有比较多的input标签,因为form中的input标签中的值都需要前端做客户端校验,由于本人比较懒而且特不喜欢用循环给 每个input元素添加b ...

  2. js_事件委托

    起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...

  3. js事件委托

    什么是事件委托:通俗的讲,onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也 ...

  4. [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流

    面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...

  5. jQuery之事件和批量操作、事件委托示例

    一.常用事件 click(function(){...}) // 点击时触发 focus(function(){...}) // 获得焦点触发 blur(function(){...}) // 失去焦 ...

  6. JavaScript中事件委托(事件代理)详解

    在JavaScript的事件中,存在事件委托(事件代理),那么什么是事件委托呢? 事件委托在生活中的例子: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托 ...

  7. jQuery事件委托

    jQuery事件委托 <ul id="ulBox"> <li data-id="1"></li> <li data-i ...

  8. 事件委托,js中的一种优化方法

    在前端编程中,我们常会遇到一种叫做事件委托的方法. 那么, 什么是事件委托呢? 简单来说,事件就是指onclick,onmouseover,onmouseout等大部分事件,为什么说是大部分后面会提到 ...

  9. 理解js事件冒泡事件委托事件捕获

    js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...

随机推荐

  1. fc全连接层的作用、卷积层的作用、pooling层、激活函数的作用

    fc:1.起到分类器的作用.对前层的特征进行一个加权和,(卷积层是将数据输入映射到隐层特征空间)将特征空间通过线性变换映射到样本标记空间(也就是label) 2.1*1卷积等价于fc:跟原featur ...

  2. StringJoiner

    示例一 public class StringJoinerTest1 { public static void main(String[] args) { StringJoiner joiner = ...

  3. 使用Spring实现AOP(XML+注解)

    一.Spring对AOP的支持 AOP并不是Spring框架特有的,Spring只是支持AOP编程的框架之一,每一个框架对AOP的支持各有特点,有些AOP能够对方法的参数进行拦截,有些AOP对方法进行 ...

  4. 如何在IAR工程中创建和使用模板

    路径为:Edit -> Code Templates -> Edit Templates  如下图: #TEMPLATE "&FileDeclare>&Fi ...

  5. 绘图驱动-OSD原理2

    转载自:http://blog.pfan.cn/programming/21209.html 现在已经可以通过修改存储单元内容来改变OSD的像素,但还有个关键的问题是如何根据需要来进行操作,即如何将某 ...

  6. python爬取斗鱼B总直播弹幕

    在某群中看到关于弹幕爬取的需求,又因为斗鱼比较OP,就以这个作为切入点. 如果你想了解如何获取弹幕,我的这个例子就可以让你豁然开朗,对于哪些没有开发弹幕的直播或视频平台,就需要用抓包工具获取请求,然后 ...

  7. 自动化运维工具Ansible实战(四)常用模块

    转载链接:http://blog.51cto.com/liqingbiao/1962609   Ansible模块按功能分为:云模块.集群模块. 命令模块.数据库模块.文件模块.资产模块.消息模块.监 ...

  8. 执行上下文--变量、函数、this

    原文地址:https://www.xingkongbj.com/blog/js/execution-context.html JavaScript 中的执行上下文和调用栈 ES6 变量作用域与提升:变 ...

  9. 嗨翻C语言笔记(一)

    对自己狠一点,逼自己努力,总有一天你会感谢今天的自己! C语言不支持现成的字符串, 只能用数组表示. & (and)运算, 即两个数的每个二进制位都进行比较, 对等位均为1时为1, 否则为0. ...

  10. pt-online-schema-change在线修改表结构

    工具简介 pt-osc模仿MySQL内部的改表方式进行改表,但整个改表过程是通过对原始表的拷贝来完成的,即在改表过程中原始表不会被锁定,并不影响对该表的读写操作.首先,osc创建与原始表相同的不包含数 ...