addEventListener事件委托
什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。
也就是:利用冒泡的原理,把事件加到父级上,触发执行效果。
好处1,提高性能。
好处2,新添加的元素还会有之前的事件。
基本格式:元素.addEventListener(type, fn , true/false);第三个参数一般不写,默认值是false,它决定了是先捕获还是先冒泡,如果是true就是捕获,反之则是冒泡(事件捕获:父级元素先触发,子集元素后触发;
事件冒泡:子集元素先触发,父级元素后触发;)。第一个参数是事件类型(例如:click,mouseenter,mousedown)。第二个参数是绑定的函数。
addEventListener事件委托的更多相关文章
- HTML 事件(三) 事件流与事件委托
本篇主要介绍HTML DOM中的事件流和事件委托. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4 ...
- jQuery-1.9.1源码分析系列(十) 事件系统——事件委托
jQuery的事件绑定有几个比较优秀的特点: 1. 可以绑定不限数量的处理函数 2. 事件可以委托到祖先节点,不必一定要绑到对应的节点,这样后添加的节点也照样能被处理. 3. 链式操作 下面主要分析事 ...
- [JS]笔记14之事件委托
-->什么是事件委托-->事件委托原理-->事件委托优点-->事件源 / 目标源 一.什么是事件委托 通俗的讲,onclick,onmouseover,onmouseout等这 ...
- js性能优化-事件委托
js性能优化-事件委托 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(当然只是一个解释,实际工作中很少 ...
- JS 中的事件绑定、事件监听、事件委托
事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有 ...
- Javascript事件模型系列(二)事件的捕获-冒泡机制及事件委托机制
一.事件的捕获与冒泡 由W3C规定的DOM2标准中,一次事件的完整过程包括三步:捕获→执行目标元素的监听函数→冒泡,在捕获和冒泡阶段,会依次检查途径的每个节点,如果该节点注册了相应的监听函数,则执行监 ...
- javascript事件监听与事件委托
事件监听与事件委托 在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件 ...
- javascript中的事件委托
这几天看到一个面试题,大概就是,让你给1000个li都添加一个click事件,应该怎么添加?大多数人第一开始的感觉可能就是,每个li上边都添加一个呗,那要是这样的话,估计面试的时候就会GG了,这里就是 ...
- 整理了一些jQuery关于事件冒泡和事件委托的技巧
首先,大家都知道,jQuery事件触发时有2种机制,一种是事件委托,另一种是事件冒泡(IE情况暂时不考虑).拿click事件做例子,先附上一段代码: html: <body> <di ...
随机推荐
- (六) Java数据库
一.概述 程序开发没有数据库的参与,可以说几乎是不可能的.数据库和Java都已经有了简单的了解,现在的关键是对两者进行连接,起到这一作用的正是JDBC——Java Database Connectiv ...
- Java-WebServiceUtil工具类
/** * Program : WebServiceUtil.java * Author : leigq * Create : 2010-11-12 上午09:02:05 * * Copyright ...
- Python模拟浏览器多窗口切换
# 模拟浏览器多窗口切换 # 代码中引入selenium版本为:3.4.3 # 通过Chrom浏览器访问发起请求 # Chrom版本:59 ,chromdriver:2.3 # 需要对应版本的Chro ...
- 【Maven】-maven打包跳过javadoc
有时候由于代码中注释错误(比如方法参数)或者maven javadoc插件版本有问题,导致打包报错,而我们着急打包验证问题,没有时间一一修改错误,这时候可以先跳过生成javadoc,继续下一步工作. ...
- [Linux]Ubuntu安装Java详细教程
环境:Ubuntu16.04 桌面版虚拟机 1.下载安装包:jdk-8u231-linux-x64.tar.gz 链接: https://pan.baidu.com/s/1mmtzKejL1Fd_RQ ...
- wind本地MySQL数据到hive的指定路径
一:使用:kettle:wind本地MySQL数据到hive的指定路径二:问题:没有root写权限网上说的什么少jar包,我这里不存在这种情况,因为我自己是导入jar包的:mysql-connecto ...
- CUDA-F-1-1-异构计算-CUDA
开篇废话 成熟与智慧其实和年龄相关,但绝不是完全由年龄决定,少年老成的人肯定是存在的,不是长得老,而是心态成熟,当然大多数老年人其实有些事情思考起来还是老原则,所以他们有时候做事没那么周到,所以一个人 ...
- selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: element is not attached to the page document
抓取网页代码后,由于是在同一个li标签下,所以使用一次性抓取,所有的a标签,然后循环做不同的操作,但是抛出找不到元素异常. def office_page(_chrome: Chrome): sn = ...
- 初学 Nginx (一) SSI 的作用
SSI:Server Side Include,是一种基于服务端的网页制作技术, Nginx ssi 的例子如下: It took a little while to figure this out ...
- Excel表格写入操作函数 C++
#pragma once #include <stdio.h> #include <string.h> typedef unsigned short ushort; class ...