event.target详解+练习

最新推荐文章于 2024-07-04 20:33:10 发布
最新推荐文章于 2024-07-04 20:33:10 发布
阅读量2.1k 收藏
点赞数
分类专栏： jQuery 文章标签： event.target event target
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36997847/article/details/79607553
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
	</head>
	<style>
		span, strong, p {
	  	padding: 8px; display: block; border: 1px solid #999;  }
    </style>
	<body>
		
		<div id="log"></div>
		<div>
		  <p>
		    <strong><span>c</span></strong>
		  </p>
		</div>
		<hr />
		
		<ul>
		  <li>item 1
		    <ul>
		      <li>sub item 1-a</li>
		      <li>sub item 1-b</li>
		    </ul>
		  </li>
		  <li>item 2
		    <ul>
		      <li>sub item 2-a</li>
		      <li>sub item 2-b</li>
		    </ul>
		  </li>
		</ul>
		<script type="text/javascript">
			/**
			 * event.target     返回Element
			 * 描述：触发事件的DOM元素
			 * 
			 * target可以是注册事件时的元素，或者它的子元素。通常用于比较event.target和
			 * this事件是不是由于冒泡而触发的。经常用于事件冒泡时处理委托事件。
			 * 
			 * 
			 * 
			 * */
			
			//例子一
			$("body").click(function(event){
				$("#log").html("target : " + event.target.nodeName);
			});
			
			//例子二
			//实现一个简单的事件委托：给无序列表添加一个点击事件处理函数，
			//然后它的子元素li的子元素都隐藏起来，当点击这个ul其中一个子
			//元素li的时候，来回切换显示（参见 toggle()）li的子元素。
			function handler(event){
				var $target = $(event.target);
				if($target.is("li")){
					$target.children().toggle();
				}
			}
//			$("ul").click(handler).find("ul").hide();
			$("ul").click(handler).find("ul").hide();
			
		</script>
	</body>
</html>

例子一结果：

例子二结果：


count2014
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
什么是 event.target ？
liuhao9999的博客
03-22 6360
简单来说，event.target是发生事件的元素或触发事件的元素。 假设有如下的 HTML 结构： <divonclick="clickFunc(event)"style="text-align:center;margin:15px; border:1pxsolidred;border-radius:3px;"> <divstyle="margin:25px;border:1pxsolidroyalblue;border-radius:3px;">......
H5拖拽的练习详解
lhy010831的博客
07-20 821
h5拖拽的练习以及详情
event.target解析
weixin_30408739的博客
09-28 229
event.target返回最初触发事件的DOM对象。 Vue例子： main.js methods:{ fan:function(event){ console.log(event.target); } } html: <button @click="fan">点击</button> 结果： ...
JS中事件处理机制（秒懂事件委托、事件捕获和事件冒泡）
最新发布
2401_84435768的博客
07-04 441
当事件在 DOM 树中某个元素上触发时，事件首先会从根节点（document）开始，沿着DOM树向下传播直至达到目标元素。因此，如果在某个祖先元素上绑定了事件处理程序，并且该事件处理程序使用了事件捕获阶段，那么该事件处理程序会在目标元素的事件处理程序之前执行。因此，如果在某个祖先元素上绑定了事件处理程序，并且该事件处理程序使用了事件冒泡阶段，那么该事件处理程序会在目标元素的事件处理程序之后执行。因此，当我们将事件处理程序绑定到父元素上时，父元素可以代理处理子元素上的事件，这就是事件委托的原理。
event target
qq_42160596的博客
08-11 475
event target Posted on 2018-03-09 | In Javascript 事件 页面与用户之间的交互是通过事件完成的。事件是用户自身的操作或者浏览器自身的一些动作。比如常见的用户的点击，浏览器load事件。在事件发生的过程中会记录一些用户的操作信息或者浏览器的动作信息。学习事件需要了解事件的机制（冒泡、捕获），不同浏览器对dom事件的写法以及delegate...
event.target
weixin_34377065的博客
12-30 101
获取当前点击的元素 转载于:https://www.cnblogs.com/lanai/p/10198752.html
JavaScript事件属性event.target
weixin_30888413的博客
03-01 155
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #main {...
js模态对话框使用方法详解
10-20
if (event.target == document.getElementById('myModal')) { document.getElementById('myModal').style.display = 'none'; } } // 获取并绑定关闭按钮的点击事件 var span = document.getElementsByClassName...
ClickHouse详解
热门推荐
我思，顾我在
10-27 3万+
一 clickhouse-简介 ​ ClickHouse是俄罗斯的Yandex于2016年开源的一个用于联机分析(OLAP:Online Analytical Processing)的列式数据库管理系统(DBMS:Database Management System) , 主要用于在线分析处理查询（OLAP），能够使用SQL查询实时生成分析数据报告。 ClickHouse的全称是Click Stream，Data WareHouse，简称ClickHouse 实时数据 ,事件,快 [外链图片转存失
[初学者必看]JavaScript 简单实际案例练习，锻炼代码逻辑思维
06-20
### JavaScript 实际案例练习知识点详解 #### 一、图片轮播器 **核心知识点：** - **HTML 结构设计：** 使用 `<div>` 和 `<img>` 标签构建轮播结构。 - **CSS 样式设计：** 使用 `position` 和 `width` 控制图片的...
$event对象总结
m0_63855883的博客
06-07 2521
监听 input 输入框的 focus 和 blur 事件并切换类名。监听 window 的 resize 事件并实时更新元素宽度。监听 form 表单的 submit 事件并发送数据。监听 button 按钮的点击并获取鼠标点击坐标。监听 touchmove 事件并实时改变元素位置。监听 keydown 事件并判断是否按下回车键。监听 scroll 事件并实时更新滚动进度。监听 a 标签的点击并阻止默认行为。监听鼠标移动并实时改变元素位置。
EventTarget
Claroja
02-03 241
EventTarget是DOM接口,各个对象可以实现它来监听事件 构造 EventTarget() 方法 方法 描述 EventTarget.addEventListener() EventTarget.removeEventListener() EventTarget.dispatchEvent() 参考: https://developer.mozilla.o...
VUE中内联代码获取事件对象中的事件触发元素$event.target
m0_48122750的博客
12-07 1354
今天在看<<Vue.js快跑>>这本书时,当中关于获取事件对象$event提到可以在内联代码中实现,作为新手不太理解,内联代码用的也比较少,一般通过绑定方法,在methods的方法中去获取比较多.请教了一下别人之后恍然大悟.记录下来也是一种学习. 当方法中代码只有一行的时候,可以采用内联代码的形式,直接写在html里面. ![这是书中原话,圈起来的地方不太理解](https://img-blog.csdnimg.cn/20201207204051312.jpg?x-..
js 中的 $event 是啥？啥时候能.target？
pig_ning的博客
01-17 466
js 中的 $event 是啥？啥时候能.target？
event.target.value解析
qq_45800365的博客
08-09 1488
event.target.value 是 JavaScript 中处理事件对象时常用的属性，用于获取事件的目标元素的值。在 React 中，它通常在处理表单元素变化的事件处理函数（例如 onChange）中使用，以便获取用户输入的新值。target 属性: 事件对象中的 target 属性表示触发事件的 DOM 元素，即事件的目标元素。value 属性: 在表单元素中，特别是输入框 ()、文本域 () 等元素中，value 属性表示元素当前的值。在大多数情况下，这个属性用于处理用户输入值的变化。
jquery 中event target
jidetashuo的博客
12-09 595
1.event.target  指的是引发事件的dom元素 2.this和event.target的区别 js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素； 3.this和event.target的相同点 this和event.target都是dom对象，如果要使用jquey中的方法可以将他们转换为jque
vue中关于$event的通俗理解
weixin_60908162的博客
08-23 1042
通过对$event的多次打印结果，可见： $event是指当前触发的是什么事件（鼠标事件，键盘事件等） $event.target则指的是事件触发的目标，即哪一个元素触发了事件，这将直接获取该dom元素 下面是例子:由于鼠标点击，所以触发鼠标单击事件，打印出来的是事件，如下图： <button @click="console.log($event)" name="哈哈">单击</button> 展开后确实有target属性，且target说明了这是b...
jquery事件之event.target用法详解
weixin_30306905的博客
05-29 255
1. 定义和用法: 显示哪个 DOM 元素触发了事件： $("p, button, h1, h2").click(function(event){ $("div").html("Triggered by a " + event.target.nodeName + " element."); }); 定义和用法 target 属性规定哪个 DOM 元素触发了该事件。 语...
obj.onmousedown = function(event) { //点击的不是白盒子 // 兼容IE event = event || window.event; if ((event.target ? event.target : event.srcElement).className == 'i') { if ((event.target ? event.target : event.srcElement).style.backgroundColor = "#1AAB8A") { num1 = num1 + 200; } else if ((event.target ? event.target : event.srcElement).style.backgroundColor = "#E15650") { num2 = num2 + 300; } else if ((event.target ? event.target : event.srcElement).style.backgroundColor = "#121B39") { num3 = num3 + 400; } else if ((event.target ? event.target : event.srcElement).style.backgroundColor = "#80A84E") { num4 = num4 + 500; } //点击后的盒子颜色 (event.target ? event.target : event.srcElement).style.backgroundColor = "#bbb"; //清除盒子标记 (event.target ? event.target : event.srcElement).className = ''; //计分 //显示得分 num=num1+num2+num3+num4; count.innerHTML = '当前得分: ' + num; } 为什么错了
05-24
event.target : event.srcElement).style.backgroundColor == "rgb(26, 171, 138)") { num1 = num1 + 200; } else if ((event.target ? event.target : event.srcElement).style.backgroundColor == "rgb(225, 86...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值