Javascript事件委托

Javascript事件通过冒泡传递,事件最初发生在某个元素,然后传递给该元素的父元素,父元素再传给父元素,如此一级一级往上传递。如果事件发生的元素不处理事件,而是让事件传递到祖先元素,让祖先元素处理,这就是事件委托。

事件委托很经典的应用就是在菜单上:

这里写图片描述

上面的菜单,可以这样写事件处理:

$("#menuBox").click(function(event){var target = event.target;    //获取触发事件的元素
})

这样,我们只需要在父元素上监听一次点击事件就好了,不用每个item都监听一次click事件。因为监听事件消耗的资源少了,可以提高网页性能,减少内存占用。

另外,事件委托在一些内容动态生成的情况下非常有用(web APP很多这样的用法),比如上面的菜单我要增加一个按钮,如果不使用委托,我需要:

(1)向#menuBox插入一个新的Item元素
(2)为新的Item元素绑定事件

如果使用委托,我只要第(1)步就好了,事件是父元素来处理的,我不需要关心。

有动态生成,就有动态删除!现在我要把我刚刚新增的Item元素删除掉。直接remove掉Item的内容就行吗?不行,这样绑定在Item上的事件并没有取消掉,还在监听,浪费资源不说,还很容易造成各种奇怪的问题。


参考文档:what’s the benefit of event delegation

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/430065.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Cmd Markdown 简明语法手册

转自地址: https://www.zybuluo.com/mdeditor?urlhttps://www.zybuluo.com/static/editor/md-help.markdown『Cmd 技术渲染的沙箱页面,点击此处编写自己的文档』Cmd Markdown 简明语法手册 Cmd-Markdown 1. 斜体和粗体 使用 * 和 ** 表示斜体和粗体。 示…

python函数拟合编程_Python应用实现双指数函数及拟合代码实例

双指数函数待拟合曲线为 y(x) bepx ceqximport matplotlib.pyplot as pltx ([0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5,0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1.0])y ([0.33, 0.26, 0.18, 0.16, 0.12, 0.09, 0.08, 0.07, 0.06, 0.06,0.06, 0.…

ThreeJS 开发实例

形状和材质 虚线 画虚线: function DrawDashLine(){var geometry new THREE.Geometry();/*** vertexColors: false 关闭使用点颜色来生成线的颜色,这个值默认是false,如果设置为true,那么后面设置的color将不起作用* dashSize…

【poj3070】Fibonacci

矩乘快速幂入门 题目已经把题解讲得很清楚了 1 #include<cstdio>2 #include<cstring>3 #include<cassert>4 #include<algorithm>5 using namespace std;6 #define p 100007 #define N 108 #define ll long long9 struct matrix{ 10 int n,m; 11 …

调用线程必须为sta_Java手写分布式系统远程调用RPC框架

一、RPC简介最近看hadoop底层通信&#xff0c;都是通过RPC实现的。RPC(Remote Procedure Call Protocol)远程调用&#xff1a; 远程过程调用是一种常用的分布式网络通信协议,它允许运行于 一台计算机的程序调用另一台计算机的子程序&#xff0c;同时将网络的通信细节隐藏起来&a…

ThreeJS阴影

在threejs中&#xff0c;阴影可以定义为“在渲染器支持的情况下&#xff0c;有一个可以产生阴影的光&#xff0c;照射在若干个可以产生阴影的物体上&#xff0c;并在某个可以接受阴影的物体上产生阴影”。所以&#xff0c;要产生阴影&#xff0c;渲染器、光、物体&#xff0c;接…

python2发送http不编码_[转]Python 2.x中常见字符编码和解码方面的错误及其解决办法...

Python 2.x中的字符编码&#xff0c;设计的的确不好&#xff0c;导致初学者&#xff0c;甚至是即使用Python很长时间的人&#xff0c;都会经常遇到字符编解码方面的错误。下面就把一些常见情&#xff0c;尽量的都整理出来&#xff0c;并给出相应的解决办法。看此文之前Python中…

shell总结(0基础入门)

一、简介 shell是用户和操作系统交互的命令行解释器。 shell有很多种&#xff1a; bash、csh、sh、ksh、、、 我们等了linux时看到的命令行就是一个bash。 二、第一个脚本&#xff1a; [rootlinux1 script]# vim first.sh #!/bin/bash#auther:xiaofan#time:2016.10.4#井号是注…

使用webpack打包ES6代码

安装nodejs 根目录下运行 npm init根据提示输入项目相关信息&#xff0c;然后运行&#xff1a; npm install 安装webpack 在项目根目录下运行 npm install webpack --save-dev 安装babel loader 和 转码规则 在根目运行命令&#xff1a; npm install babel-loader --sa…

c语言代码可以python运行吗_c语言如何运行python脚本

目前的C/C与python的混合编程分为两大类&#xff1a;1、使用python调用c/c编写的扩展库&#xff0c;扩展python的功能&#xff0c;我们暂且称为python调用c/c2、使用c/c程序调用执行python中定义的函数等&#xff0c;我们暂且称为c/c调用python本文只针对c/c调用执行python作一…

十万个为什么 —— 为什么一个数的 0 次方只能是 1

1. 幂的排列 212,224,238 ⇒ 20?,2−112 2012. 指数乘法运算 对于所有的实数 x,y&#xff0c;ax⋅ayaxy 因此&#xff1a; 当 y0 时&#xff0c;ax⋅a0ax ⇒ a01当 y−x 时&#xff0c;ax⋅a−xa0 ⇒ a01转载于:https://www.cnblogs.com/mtcnn/p/9423448.html

Threejs性能监视和可视化控制

概述 性能监视是监视threejs运行中的刷新频率&#xff0c;要使用到threejs提供的stat.js&#xff0c;可视化控制是在窗口中显示一个可见的控制框&#xff0c;可以通过鼠标改变其中的值&#xff0c;达到改变threejs对象参数的目的&#xff0c;需要使用到dat.gui.js 性能监视 …

python autoit上传文件_结合python+selenium使用AutoIt V3实现文件、图片上传

1.下载、安装AutoIt V3下载官网&#xff1a;https://www.autoitscript.com/site/autoit/downloads/2.AutoIt V3组件介绍AutoIt Windows Info 或者Au3Info_x64.exe 用于帮助我们识别Windows控件信息。Compile Script to.exe 或者Aut2exe_x64.exe 用于将AutoIt生成 exe …

百度贴吧的数据抓取和分析(一):指定条目帖子信息抓取

这个教程使用BeautifulSoup库爬取指定贴吧的帖子信息。 本教程的代码托管于github: https://github.com/w392807287/spider_baidu_bar 数据分析部分请移步&#xff1a; python版本&#xff1a;3.5.2 使用BeautifulSoup库获取网页信息 引入相关库&#xff1a; from bs4 import …

在ES6类中绑定事件

概述 ES6提供了类&#xff0c;给模块化带来了很大的帮助。在类里面绑定事件&#xff0c;一来是为了使得代码结构清晰&#xff0c;二来是为了可以使用类的变量和方法。但是&#xff0c;由于事件的回调函数并不是由类的实例对象触发&#xff0c;所以&#xff0c;事件回调函数里面…

DevExpress.Utils.ToolTipLocation

private void textBox1_TextChanged(object sender, EventArgs e){if ((sender as TextBox).Text.Length 0){DevExpress.Utils.ToolTipLocation tipLocation new DevExpress.Utils.ToolTipLocation();toolTipController1.ShowHint("不能为空", textBox1, ToolTipLo…

github基本使用教程

2017-10-22 更新 目前已经有一个很好的Github教程—— Git it&#xff0c;可以花半个小时比较全面的了解github的使用&#xff0c;直接在relaese里下载一个最新版&#xff0c;双击运行就可以看到教程了。下面的教程也还可使用。 如果不熟悉 git命令,可以使用 learngitbranchi…

python while九九乘法表儿歌_python使用while循环实现九九乘法表

protocol http not supported or disabled in libcurl apt-getubuntu 14.04 碰到了这个莫名其妙的问题.谷歌了一把,解决方案如下:http://askubuntu.com/questions/683857/curl-1-protocol-https-n ...linux基础-基本命令的讲解&lpar;1-7单元)基本命令的讲解 主要内容介绍 1…

EF+postgresql中的一些问题

需要基于MVC的WebAPI搭建一个服务接口&#xff0c;数据存储在postgresql数据库&#xff0c;在使用的过程中遇到了很多问题。做一下记录&#xff1a; &#xff08;1&#xff09; System.IO.FileLoadException: 未能加载文件或程序集“Npgsql, Version3.1.2.0, Cultureneutral, P…

Navicat Error 2003 - can't connect to mysql server 'localhost' (10061)

项详细出错对象&#xff1a;Navicat for mysql出错信息&#xff1a;2003 - can’t connect to mysql server ‘localhost’ (10061)出错原因&#xff1a;mysql 服务器没有启动解决办法&#xff1a;去mysql的安装目录下找到“\bin\mysqld.exe”&#xff0c;双击运行&#xff01;…