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. 斜体和粗体 使用 * 和 ** 表示斜体和粗体。 示…

【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;接…

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#井号是注…

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

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

github基本使用教程

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

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;…

▲数据结构 笛卡尔树【2011】五2 C++版

转载于:https://www.cnblogs.com/qilinart/articles/5940726.html

运行时异常与一般异常有何异同_Java修行第015天,异常机制和常用类

1. 异常概念_分类1) 什么叫异常&#xff1f;答:异常(Expection)就是在程序运行过程中所发生的不正常的事件,它会中断正在运行的程序2) 请简述异常的分类&#xff1f;答:异常分为Error(仅靠程序本身无法恢复的严重错误)和由Java应用程序 抛出和处理的非严重错误.非严重错误又分为…

DOM Element对象的offsetXXX方法

原生js的offset***方法 c.offsetLeft 和 c.offsetTop 一般指当前元素的CSS边框相对于其offsetParent的X和Y坐标c.offsetHeight 和 c.offsetWidth 当前元素及其所有内容的高度&#xff0c;宽度。c.offsetParent 大多数元素都的都是指<body> 参考《javascript权威指南 第六…

出现一个黑色框按不动_创意 | 这才是走心的衣架设计,给衣服一个高逼格的家!...

12月&#xff0c;来到了年底剁手的时节自己新买的秋冬衣服&#xff0c;加上以前的衣服几乎都要把你的衣橱给撑爆了只恨衣架不够用&#xff0c;够用也没有空间可以挂衣服了也许以前的衣架只是为了挂衣服&#xff0c;让空间变得整洁一些&#xff1b;现如今&#xff0c;衣架从样式…

windows搜索工具_加快搞定并替代 Windows 10 搜索框搜索文件速度的免费小工具

毫无疑问&#xff0c;Everything 搜索是 Windows 操作系统上可用的最快的搜索工具之一。它比内置的 Windows 搜索工具快得多&#xff0c;因为它几乎立即返回结果&#xff0c;并支持许多自定义选项以优化搜索。而今天大眼仔要给大家分享的是可以把 Everything 固定的任务栏上的免…

excel线性拟合的斜率_协方差分析:方差分析与线性回归的统一

转自个人微信公众号【Memo_Cleon】的统计学习笔记&#xff1a;协方差分析&#xff1a;方差分析与线性回归的统一。在进行数据分析时&#xff0c;有时候我们会遇到数据基线不平的情况&#xff0c;比如两样本的t检验的示例&#xff0c;比较Labe和Meto用药13周的降压效果&#xff…

状态模式和策略模式的区别

区别主要体现在行为上&#xff0c;而不是结构上&#xff0c;所以&#xff0c;看时序图就能很好的看出两者的区别。 状态模式 看1.4&#xff0c;状态B是状态A创建的&#xff0c;也就是由系统本身控制的。调用者不能直接指定或改变系统的状态转移 所以&#xff0c;状态是系统自…

如何截获打印机文件_打印、复印还不会,如何在办公室里混?全程详细教学

我们在职场中&#xff0c;经常需要用到打印机&#xff0c;相信很多人都还不会打印、复印文件&#xff0c;求人不如求己&#xff0c;今天就来详细教学&#xff0c;一起来学习吧。如何使用打印机&#xff1f;首先用一根电源线和一根USB线&#xff0c;将电脑主机与打印机连接&…

外观模式案例分析

策划案 要实现选中和未选中功能&#xff1a; 未选中状态&#xff1a;点击图形进入选中状态 选中状态&#xff1a;点击<按钮进入未选中状态 实现代码 请问这是什么模式&#xff1f; import TransformController from ./TransformController //操作框控制器类 import To…

input ios问题 小程序_小程序可以解决哪些问题??

小程序是近几年移动互联网领域的热点&#xff0c;随着移动互联网在消费端逐渐进入到了存量时代&#xff0c;小程序成为了互联网平台向各个领域垂直发展的重要策略&#xff0c;而广大的中小创业者要想充分利用大型互联网平台的流量资源&#xff0c;小程序也是一个非常重要的渠道…

sprintf函数_三分钟学 Go 语言——函数深度解析(下) 可变参数

接连两篇函数专题深度解析&#xff0c;相信大家已经对函数的语法有了深入的了解。函数简单使用和基本知识解析匿名函数和闭包五一放假期间&#xff0c;我懂得&#xff0c;估计你们都不想学习。小熊这两天因为个人种种令人难受的原因&#xff0c;没有能更新&#xff0c;也没有提…