JS：事件委托（代码）

最新推荐文章于 2024-04-19 11:56:06 发布
最新推荐文章于 2024-04-19 11:56:06 发布
阅读量259 收藏
点赞数
分类专栏： p2代码 p2 原生js 文章标签： javascript html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59519449/article/details/120707863
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul{
				border: 1px solid;
			}
			li{
				background: red;
				margin-bottom: 10px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
		<script type="text/javascript">
			var ul = document.querySelector("ul");
			ul.onclick = function(e){
				var ev = e || window.event;
				// 指向触发事件被点击的元素
				var dom = ev.target;
				// console.log(dom.nodeName);
				
				// if(dom.nodeName.toLowerCase() == "li"){
				// 	console.log(dom.innerHTML);
				// }
				
				if(dom.nodeName.toLowerCase() != "li")return;
				
			}
		</script>
	</body>
</html>

一染星辰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Js中事件委托的实现
小翠学姐的博客
11-04 2389
** 加粗样式 ** 我们首先来看下面一段程序（定义了一个无序列表，其中包括三个li标签）： &amp;lt;ul id=&quot;myLinks&quot;&amp;gt; &amp;lt;li id=&quot;goSomewhere&quot;&amp;gt;Go somewhere&amp;lt;/li&amp;gt; &amp;lt;li id=&quot;doSomething&
js代码-js事件委托
07-16
js代码-js事件委托
前端学习--JS入门(6) 事件冒泡/事件委托/获取元素位置
Michelle209的博客
04-07 1048
当一个元素的事件被触发时，同样的事件会在该元素的所有祖先元素中依次被触发（从里到外）元素距离自己定位父级元素的左、上距离（如果没有定位，就一直往上找到有定位的父元素）给父元素注册事件，当触发子元素时，会冒泡到父元素上，触发父元素的事件。默认有冒泡模式存在，事件容易影响到父级元素。同时给多个元素注册事件--利用事件冒泡。事件流是事件完整执行过程中的流动路径。从DOM的根元素执行事件（从外到里）滚动条再滚动的时候持续触发的事件。外部资源加载完毕时触发的事件。应用：固定导航栏/返回顶部。只会触发所有父元素的。
【JAVAScript】【4】利用事件委托简化点击事件（包含箭头函数，target）
weixin_51612770的博客
05-18 1357
JAVASCript利用事件委托简化点击事件 当写多个点击事件时我总是会添加很多监听函数，但是利用事件委托后仅需添加父元素的监听函数，在利用冒泡就可以为每个子元素添加监听函数，大大简化了程序 文章目录JAVASCript利用事件委托简化点击事件前言一、事件委托二、箭头函数三、Element.target四、实例总结 前言 以下是围绕事件委托（事件代理）的一个切换案例，同时补充箭头函数和Element.target 一、事件委托 JavaScript中常用绑定事件的常用技巧，“事件委托”即是把原本需要
JavaScript 事件，事件流，事件委托
最新发布
2401_84094506的博客
04-19 635
自定义事件不是由DOM原生触发的，它的目的是让开发人员创建自己的事件。要创建的自定义事件可以由createEvent(“CustomEvent”);返回的对象有一个initCustomEvent（）方法接收如下四个参数。type：字符串，触发的事件类型，自定义。例如 “keyDown”，“selectedChange”;bubble（布尔值）：标示事件是否应该冒泡；cancelable(布尔值)：标示事件是否可以取消；detail（对象）：任意值，保存在event对象的detail属性中；
深入解析：JS与Vue中事件委托（事件代理）的高效实现方法
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
02-28 4195
事件委托是一种利用事件冒泡的特性，在父节点上响应事件，而不是在子节点上响应事件的技术。它能够改善性能，因为只需要在父元素上设置一次事件监听器，就可以管理同一类型的所有子元素的事件。在日常开发中，很经常我们会遇到个问题，就是在长列表数据较多的时候，而又需要对子元素注册一些事件（如onClick）,就会造成比较大的内存开支，很耗费性能，也可能会造成页面卡顿等等；例如，可以在父元素上设置一个click事件监听器，然后在子元素上绑定一个click事件，通过事件委托实现父元素对子元素事件的响应。
jQuery代码优化 事件委托篇
10-28
【jQuery代码优化 - 事件委托篇】 随着网页开发中DOM结构变得越来越复杂，以及Ajax等动态脚本技术的广泛运用，事件委托成为了一个重要的优化手段。事件委托是JavaScript和jQuery中用于提高性能和减少内存消耗的技术...
JavaScript之事件委托实例(附原生js和jQuery代码)
10-19
下面小编就为大家带来一篇JavaScript之事件委托实例(附原生js和jQuery代码)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
eventDelegation:事件委托和懒惰评估实践
06-01
1. **内存效率**：事件监听器的数量减少，占用的内存更少。 2. **动态元素**：新添加的元素自动继承事件监听，无需额外绑定。 3. **减少DOM操作**：避免频繁地对DOM进行查询和操作，提高性能。 ### 适用场景 - 当有...
JS事件委托实例总结
张木期的博客
09-12 6362
基本概念 事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。 引言 事件委托应用在很多开发场景之中，但是很多同学对委托的原理、特别是对JS原生实现委托不太了解。每每看到...
js事件委托
weixin_52044297的博客
06-01 116
1. 什么是事件委托 事件委托：把事情委托给别人，代为处理。 事件委托也称为事件代理，在 jQuery 里面称为事件委派。 理解：说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。 js事件中的委托： <ul> <li>知否知否，应该有弹框在手</li> <li>知否知否，应该有弹框在手</li> <li>知否知否，应该有弹框在手</li>
.net委托与事件代码
11-05
.net委托与事件设计模式我作为初学者理解了很久，借鉴了别人的成果自己写了一个易懂的代码，希望对初学者有用。
JavaScript实现事件委托
weixin_45785873的博客
11-09 578
事件流分为三个阶段，依次为捕获阶段(父->子)、目标阶段、冒泡阶段(子->父)，事件触发顺序为捕获阶段–目标阶段–冒泡阶段； 平时给元素绑定事件一般是直接写到属性上（即0级事件处理程序）或是addEventListener()监听事件（2级事件处理程序）。但有些应用场景以上方法可能不太管用，比如给后来动态添加的元素绑定事件监听。这时就可以使用事件委托了（也叫事件代理）。事件委托简单通俗理解就是，给外层元素绑定事件，然后利用事件冒泡，针对当前触发的元素执行相应的函数。 <ul
JS事件委托和冒泡
hzxOnlineOk的博客
03-08 1407
利用 JS 事件冒泡动态为元素绑定事件的方法称为事件委托（Event Delegation，也称为“事件代理”），是 JavaScript 中最热门的技术之一。 事件委托就是把原本需要绑定在子元素上的事件（onclick、onkeydown 等）委托给它的父元素，让父元素来监听子元素的冒泡事件，并在子元素发生事件冒泡时找到这个子元素。 举个简单的例子，整个宿舍的同学都需要去取快递，一种方法是让他们一个个去取，另一种方法是把这件事委托给宿舍长，让宿舍长把所有人的快递都取回来，然后再根据收件人一一分发给宿舍.
js中的事件委托或是事件代理详解
weixin_30883271的博客
06-25 1983
起因： 1、这是前端面试的经典题型，要去找工作的小伙伴看看还是有帮助的； 2、其实我一直都没弄明白，写这个一是为了备忘，二是给其他的知其然不知其所以然的小伙伴们以参考； 概述： 那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事件...
一分钟教你用javascript原生代码实现事件委托
weixin_33834628的博客
11-19 87
1、什么是事件委托（代理）？ ——javascript中的事件委托就是利用冒泡原理，将事件绑定到节点的父级节点上，从而触发这些节点执行代码中编写的效果； 2、事件委托的好处： 　　1）、提高js性能； 　　2）、后续添加的元素同样能触发事件； 3、理解委托需要掌握的知识点：事件源（event对象中的事件源：无论在哪个事件中，当前操作的元素就是事件源） 　　IE浏览器中的事件...
JS-基础 --事件的委派
m0_52534604的博客
05-22 401
学习目标简介： 先来聊聊委派是什么意思，指委托安排； 委任派遣。 但在js中就是也是类似于中意。 —-指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。 —-事件的委派是利用了冒泡，通过委派可以减少事件的绑定的次数，提高程序的性能。 学习内容：target event(事件对象)中的target表示的是触发事件的元素 在body的代码如下： <body> <ul id="ul"> <l
js基础知识（三十四）--事件的委派
weixin_47928499的博客
08-18 302
事件的委派
委托与事件代码详解与（Object sender,EventArgs e）详解
weixin_30872671的博客
10-29 272
委托与事件代码详解 using System;using System.Collections.Generic;using System.Text; namespace @Delegate //自定义命名空间，新建控制台程序，命名后自动添加{ // 热水器 public class Heater { private int temperature;...
js事件委托代码
05-30
以下是一个基本的 JavaScript 事件委托代码示例： HTML 代码： ```html 列表项 1 列表项 2 列表项 3 ``` JavaScript 代码： ```javascript // 获取父元素节点 const parent = document.querySelector('...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值