事件委托---addEventListener()+e.targetd返回当前点击的对象

最新推荐文章于 2023-03-20 10:36:15 发布
最新推荐文章于 2023-03-20 10:36:15 发布
阅读量514 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47010003/article/details/116608886
版权
html 同时被 3 个专栏收录
43 篇文章 13 订阅
订阅专栏
vscode
35 篇文章 2 订阅
订阅专栏
JavaScript
34 篇文章 3 订阅
订阅专栏

在这里插入图片描述

<!DOCTYPE >
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>知否知否应是绿肥红瘦</li>
			<li>知否知否应是绿肥红瘦</li>
			<li>知否知否应是绿肥红瘦</li>
			<li>知否知否应是绿肥红瘦</li>
			<li>知否知否应是绿肥红瘦</li>
		</ul>
		<script type="text/javascript">
			var ul = document.querySelector('ul');
			ul.addEventListener('click', function(e) {
				//				e.target.style.bgColor='pink';
				e.target.style.backgroundColor = 'pink';
			})
		</script>
	</body>
</html>
素心如月桠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
详解js中EventListener监听器（事件委托/事件代理）
m0_46862838的博客
05-11 4343
监听器： 语法：**addEventListener(event,function,userCapture)**方法 第一个参数写事件句柄，不需要加"on",直接写时间名就可以（如：click） 第二个参数是事件触发后调用的函数 第三个参数是个布尔值用于描述事件是冒泡还是捕获,该参数是可选值，默认值为false，即冒泡传递，当值为true时，为捕获传递 触发监听器事件: //第二个参数写匿名函数 <button id="btn"></button> <script> do
javascript经典特效---屏蔽ctrl+N功能.rar
03-11
在JavaScript中，我们可以监听用户的键盘事件，这通常通过`addEventListener`函数来实现。事件处理函数有两个关键部分：事件类型和回调函数。在这个案例中，事件类型是`keydown`，因为我们要监听用户按下键盘的那...
JS中的事件冒泡、事件捕获、事件委托
油墨香^-^的博客
03-20 736
DOM事件流（event flow）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。Dom标准事件流的触发的先后顺序为：先捕获再冒泡。即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。在我们平常用的方法中，一般只会用到两个参数，一个是需要绑定的事件，另一个是触发事件后要执行的函数，然而第三个参数默认值是false，表示在事件冒泡阶段调用事件处理函数;如果参数为true，则表示在事件捕获阶段调用处理函数。如果不写第三个参数则默认在事件冒泡阶段调用事件处理函数。
addeventlistener事件第三个参数_JavaScript中事件委托的简单说明
weixin_39622138的博客
11-27 266
1.为什么要进行事件委托？单击HTML按钮后，将消息记录到控制台。要使其正常工作，您需要选择按钮，然后使用addEventListener()方法来附加事件监听器：这就是侦听单个元素（尤其是按钮）上的事件的方式。监听多个按钮上的事件呢？这是一个可能的实现：查看Codesandbox演示以了解其工作原理。迭代按钮列表，for (const button of buttons)并将新的侦听器附加到每个...
js委托事件-addEventListeners(冒泡方向)
zhangge3663的博客
10-11 411
JQuery中live()、delegate()、on()事件都能给新增元素绑定事件，原理就是用了事件委托。 示例: 给id为div的元素绑定一个click委托，如果冒泡上来的元素是P元素就会执行alert("xxx"); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head&gt
target和this的区别
qq_40687516的博客
12-22 841
区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁 <body> <div>123</div> <ul> <li>abc</li> <li>abc</li> <li>a...
cordova-statusTap:捕获状态栏上的点击事件
05-29
科尔多瓦状态Tap 在状态栏上捕获点击事件。 这个插件针对像 Sencha 这样的库，适用于想要执行自定义代码的用户，比如在状态点击时滚动列表视图。 通过 j-mcnally 和安装要使用此插件，您要做的就是使用PhoneGap CLI...
Web-前端html+css从入门到精通 204. js方式进行动态fontsize设置.zip
05-23
动态改变字体大小的一种常见方法是通过监听事件，比如窗口大小改变(`resize`事件)，或者用户按下特定按钮。 下面是一个简单的JavaScript示例，用于改变某个元素的字体大小： ```javascript // 获取需要改变字体...
vanilla-weather-forecast:SheCodes+ Final Vanilla 项目
05-31
10. **事件委托** - 为了高效地处理大量元素的事件，事件委托是一个常见的策略，它允许在父元素上设置一个事件监听器，然后在触发事件时判断是哪个子元素引发的。 通过实践"Vanilla Weather Forecast"项目，开发者...
javascript经典特效---点击加入收藏夹.rar
03-11
6. **防止重复收藏**：为了避免用户多次点击导致重复收藏，我们可以在点击事件处理函数中添加逻辑，检测当前页面是否已经在用户的收藏夹中。 7. **优雅降级**：对于不支持JavaScript的浏览器，应保证页面的基本功能...
JavaScript使用addEventListener添加事件监听用法实例
01-19
本文实例讲述了JavaScript使用addEventListener添加事件监听用法。分享给大家供大家参考。具体实现方法如下： <!DOCTYPE html> <html lang=en> <head> <title>This text is the title of the document</title> [removed] function showalert(){ alert('you clicked me!'); } function clickme(){ var pelement=document.getElementsByTagName('p')
EventTarget方法：addEventListener() 事件监听
SORYUSHIKINAMI的博客
05-12 985
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <!-- <link rel="stylesheet" href=""> --> <style type="text/css"> d
e.target+addEventListener事件委托
...
08-24 296
e.target+addEventListener事件委托 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie
HTML DOM 事件
akuibpt23191的博客
07-13 575
1. HTML DOM 事件 参考文档：https://www.runoob.com/jsref/dom-obj-event.html HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。 提示： 在 W3C 2 级 DOM 事件中规范了事件模型。...
js事件原理、事件委托、事件冒泡和事件绑定 addEventListener
蒲公英芽的博客
01-06 1810
前言 javascript是事件驱动型语言。当用户在网页中进行某种操作时，就产生了一个“事件”(Event)。 事件几乎可以是任何事情：单击一个网页元素、拖动鼠标等均可视为事件。JavaScript是事件驱动的，当事件发生时，它可以对之做出响应。具体如何响应某个事件由编写的事件处理函数完成。 事件基础 事件分为系统派发事件和自定义派发事件。 addEventListener();//事件侦听方法...
cvte-前端面试题-点击列表项返回其列表顺序
chenjing9393的博客
03-30 654
题目是：给你一个无序列表，点击其中任意一个时返回其在列表中的顺序。下面是html片段 点击时返回1 点击时返回2 点击时返回3 点击时返回4 点击时返回5 点击时返回6      这题的常规做法是，为每个li标签绑定一个点击事件 var ul = document.getElementsByTagName("ul"); var lino
addEventListener事件委托
weixin_30240349的博客
05-10 999
什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。 也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。 好处1，提高性能。 好处2，新添加的元素还会有之前的事件。 基本格式：元素.addEventListener（type, fn ...
扫盲-----addEventlistener()方法，事件监听(一)
热门推荐
yangchunshang的博客
06-04 5万+
一、扫盲事件起因    时间：2018年6月1日周五下午，原本我以为我已经把当前的bug改好，应该没啥问题了，坐等下班公司聚餐（开心）突然，隔壁同组大哥，哎。。。。cp,你看看，你这个首页报了很多错哎。我的第一反应就是，不可能，怎么会有错误呢，我明明都自己测过好几次了。我一看，我去，果然。。。。首页报的错误都是在我写的组件里面出现的同一个错误。我的天。。。。。当页面缩放时，渲染页面提示,某方法不存...
JS .addEventListener( ) 事件监听器：监听元素的事件，并设置事件发生时触发的函数，以及事件流（冒泡、捕获）
weixin_41796631的博客
10-09 2万+
为什么使用事件监听？ 当同一个对象使用.onclick的写法触发多个方法的时候，后一个方法会把前一个方法覆盖掉，也就是说，在对象的 onclick事件发生时，只会执行最后绑定的方法。而用事件监听则不会有覆盖的现象，每个绑定的事件都会被执行。 用.addEventListener( ) 可以为元素绑定多个事件，而且每个事件都可以被执行，实现事件监听。 语法： Element.add...
window.addEventListener和div.addEventListener和document.addEventListener
最新发布
09-16
window.addEventListener、div.addEventListener和document.addEventListener都是用于添加事件监听器的方法，它们之间有一些区别。 1. window.addEventListener：这个方法将事件监听器添加到整个浏览器窗口对象上。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

素心如月桠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值