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

也就是:利用冒泡的原理,把事件加到父级上,触发执行效果。

好处1,提高性能。

好处2,新添加的元素还会有之前的事件。

基本格式:元素.addEventListener(type, fn , true/false);第三个参数一般不写,默认值是false,它决定了是先捕获还是先冒泡,如果是true就是捕获,反之则是冒泡(事件捕获:父级元素先触发,子集元素后触发;

事件冒泡:子集元素先触发,父级元素后触发;)。第一个参数是事件类型(例如:click,mouseenter,mousedown)。第二个参数是绑定的函数。

addEventListener事件委托的更多相关文章

  1. HTML 事件(三) 事件流与事件委托

    本篇主要介绍HTML DOM中的事件流和事件委托. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4 ...

  2. jQuery-1.9.1源码分析系列(十) 事件系统——事件委托

    jQuery的事件绑定有几个比较优秀的特点: 1. 可以绑定不限数量的处理函数 2. 事件可以委托到祖先节点,不必一定要绑到对应的节点,这样后添加的节点也照样能被处理. 3. 链式操作 下面主要分析事 ...

  3. [JS]笔记14之事件委托

    -->什么是事件委托-->事件委托原理-->事件委托优点-->事件源 / 目标源 一.什么是事件委托 通俗的讲,onclick,onmouseover,onmouseout等这 ...

  4. js性能优化-事件委托

    js性能优化-事件委托 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(当然只是一个解释,实际工作中很少 ...

  5. JS 中的事件绑定、事件监听、事件委托

    事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有 ...

  6. Javascript事件模型系列(二)事件的捕获-冒泡机制及事件委托机制

    一.事件的捕获与冒泡 由W3C规定的DOM2标准中,一次事件的完整过程包括三步:捕获→执行目标元素的监听函数→冒泡,在捕获和冒泡阶段,会依次检查途径的每个节点,如果该节点注册了相应的监听函数,则执行监 ...

  7. javascript事件监听与事件委托

      事件监听与事件委托 在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件 ...

  8. javascript中的事件委托

    这几天看到一个面试题,大概就是,让你给1000个li都添加一个click事件,应该怎么添加?大多数人第一开始的感觉可能就是,每个li上边都添加一个呗,那要是这样的话,估计面试的时候就会GG了,这里就是 ...

  9. 整理了一些jQuery关于事件冒泡和事件委托的技巧

    首先,大家都知道,jQuery事件触发时有2种机制,一种是事件委托,另一种是事件冒泡(IE情况暂时不考虑).拿click事件做例子,先附上一段代码: html: <body> <di ...

随机推荐

  1. phpStudy环境下composer的安装

    前言 原来是做php开发的,现在转行前端工程师,因为很久没有接触了,可能会有其他问题,这里简单记录一下,后期遇到什么问题再进行更新~ 话说下载特别慢所以这里给个网盘链接Composer-Setup.e ...

  2. 【agc002d】Stamp Rally

    题目大意 无向图中,每次询问从x和y分别出发,一共经过z个点,使需要走过编号最大的边最小. 解题思路 对于暴力,我们对于每个询问二分答案ans,将1~ans的边加入,用并查集维护,如果x和y在同一个并 ...

  3. 关于int指令

    1.关于int指令 格式:int n     n为中断类型码: 作用:     调用n号中断程序:   指令“int n”的执行过程:     1]获取中断类型码n     2]标志寄存器入栈,IF. ...

  4. vue使用ajax

    1.Vue的Ajax基本用法 在vue中用Ajax需要用到vue.js和vue-resource.js; vue-resource.js的下载地址:https://cdn.staticfile.org ...

  5. [CTF]Heap vuln -- unlink

    0x00: 起因 一直在堆的漏洞利用中不得要领,之前ZCTF又是三个堆的利用,血崩,chxx表哥给写了一个heap的pwn,学习学习. 0x01: 关于heap的unlink的漏洞利用,出的很早,在低 ...

  6. luogu 1072 Hankson 的趣味题 唯一分解定理+线性筛

    貌似是比大多数题解优的 $O(n^2logn)$ ~ Code: #include <bits/stdc++.h> #define N 50004 #define setIO(s) fre ...

  7. CF1155D Beautiful Array 贪心,dp

    CF115DBeautiful Array 题目大意:给一个有n个元素的a数组,可以选择其中一个区间的所有数都乘上x,也可以不选,求最大子序列和. 如果没有前面的操作,就是只求最大子序列和,我们都知道 ...

  8. intellij idea http proxy config

    # custom IntelliJ IDEA properties #http proxy -DproxySet=true -Dhttp.proxyHost=127.0.0.1 -Dhttp.prox ...

  9. require.context

    带表达式的 require 语句 如果你的 require参数含有表达式(expressions),会创建一个上下文(context),因为在编译时(compile time)并不清楚具体是哪一个模块 ...

  10. Leetcode题目31.下一个排列(中等)

    题目描述: 实现获取下一个排列的函数,算法需要将给定数字序列重新排列成字典序中下一个更大的排列. 如果不存在下一个更大的排列,则将数字重新排列成最小的排列(即升序排列). 必须原地修改,只允许使用额外 ...