JavaScript事件委托技术实例分析
作者：kooky798 发布时间：2023-07-01 01:18:23
标签：JavaScript,事件,委托
本文实例分析了JavaScript事件委托技术。分享给大家供大家参考。具体分析如下：
如果一个整体页面里有大量的按钮.我们就要为每一个按钮绑定事件处理程序.这样就会影响性能了.
首先每个函数都是对象,对象就会占用很多内存.内存中的对象越多,性能就越差.
其次,dom访问次数增多,就会导致延迟加载页面.事实上,从如何来利用好事件处理程序,还是有很好的解决方案的.
事件委托：
对事件处理程序过多的问题解决的方案就是事件委托技术.
事件委托技术利用了事件冒泡.只需指定一个事件处理程序.
我们可以为某个需要触发事件的父元素来绑定事件处理程序.
<ul id="mylist">
<li id="li_1">sdsdsd</li>
<li id="li_2">sdsdsd</li>
<li id="li_3">sdsdsd</li>
</ul>
现在我们要为这3个li绑定事件处理程序..
只需要在ul绑定事件处理程序.
obj.eventHandler($("mylist"),"click",function(e){
e = e || window.event;
switch(e.target.id){
//大家应该还记得target是事件目标,
//只要点击了事件的目标元素就会弹出相应的alert.
case "li_1":
alert("li_1");
break;
case "li_2":
alert("li_2");
break;
case "li_3":
alert("li_3");
break
}
})
如果在一个复杂的web应用程序中,.这种事件委托是非常实用的.
如果不采用这种方式的话,一个一个去绑定那就是数不清的事件处理程序.
希望本文所述对大家的javascript程序设计有所帮助。
0
投稿猜你喜欢
python是一款简单易用的编程语言，特别是其第三方库，能够方便我们快速进入工作，但其第三方库的安装困扰很多人.现在安装python时，已经- 索引和切片一维数组一维数组很简单，基本和列表一致。它们的区别在于数组切片是原始数组视图（这就意味着，如果做任何修改，原始都会跟着更改）。这也
- 我是用来移动图片的，其他格式的文档也是可以的，改下后缀列表就可以了import os,shutilimport datetime
- ImageFont模块定义了相同名称的类，即ImageFont类。这个类的实例存储bitmap字体，用于ImageDraw类的text()方
- 1. 需求：用户答题练习，当用户获取所有题目的同时，需要判断用户是否已经做过该题目，如果做过，需要render的时候添加一个“回顾”按钮。2
- 首先，我需要强调下，这篇主旨是揭示堆表的删除记录找回的原理，我所考虑的方面并不适用于每个人的每种情况，望大家见谅~ 很多朋友认为数据库在简单
- Pycharm实然提示过期了，网上找了很多Pycharm激活码，要么只支持老版本，要么是不能用。费了半天时间终于在一公众号里找到一枚可以使用
- 前言对于PHP大家一定不陌生，但你知道PHP在CTF中是如何考察的吗，本文给大家带来的是通过PHP特性来进行CTF比赛中解题出题的知识，会介
- 除了硬盘和磁带，现在您可以使用 SQL Server 的本机备份功能来备份您的 SQL Server Database到 Windows A
- 前言之前在csdn上看见用python写春联的，这次突发奇想用python制作一张壁纸，其元素包括背景、文字、图片。知识点 用PIL创建一张
- 原文：http://www.htmldog.com/guides/htmlintermediate/badtags/十六 有害的标签 Bad
- DATE_ADD(date,INTERVAL expr type) DATE_SUB(date,INTERVAL expr type)这些函
- 书 名：细节决定交互设计的成败国际书号：ISBN 978-7-121-08232-0作 &nb
- 好久没写了，就把上课做的一个小东西拿出来分享一下吧。百度网页截图如下 ↓↓↓程序运行输出结果截图 ↓↓↓上代码 ↓↓↓from lxml i
- -- 创建库CREATE TABLE `rate` ( `uname` VARCHAR (300), `object`
- 一、将PHP数组转换为JSON格式在PHP中，我们可以直接使用数组来存储数据。但是在JS中，数组通常以JSON（JavaScript Obj
- python操作excel主要用到 xlrd 和 xlwt 这两个库，xlrd读取excel表格数据， 支持 xlsx和
- 目录1 请求和响应1.1 请求1.2 响应2 视图2.1 基于APIView写接口2.2 基于GenericAPIView写的接口2.3 基
- 1. MySQL的安装与配置：在Ubuntu下安装MySQL方法很简单，使用如下命令：sudo apt-get install mysql-
- 如下所示：file = open('./abc.csv')csv.reader(file, delimiter=',
