您的浏览器过于古老 & 陈旧。为了更好的访问体验, 请 升级你的浏览器
Ready 发布于2014年09月03日 05:16

原创 jQuery Event.target 属性详解

114 次浏览 读完需要≈ 4 分钟

内容目录

target属性用于返回最初触发事件的DOM元素

在HTML文档中,我们为<p>元素绑定点击事件("click"),由于DOM元素的事件冒泡机制,我们点击<p>元素内的一个<span>元素就可以触发<p>元素上绑定的click事件。target属性就用于返回最初触发事件的DOM元素,也就是本例中的<span>元素。(currentTarget属性始终返回的都是该<p>元素)

该属性属于jQuery的Event对象(实例)。

语法

jQuery 1.3 新增该属性。

eventObject.target

返回值

target属性的返回值是Element类型,返回最初触发事件的DOM元素。

示例&说明

请参考下面这段HTML示例代码:

<div id="n1" style="height: 100px; background: #eee;" >
	<br>
	<p id="n2" style="background: #999;" >段落文本...段落文本...<br>
		<span id="n3" style="background: #fff;" >专注于编程开发技术分享</span>
	</p>
</div>

jQuery示例代码如下(以下点击事件中的event.currentTarget属性始终指向div元素):

$("div").click( function(event) {
	alert("最初触发事件的是:" + event.target.tagName + "#" + event.target.id);	
} );

// 点击span元素区域,弹出:"最初触发事件的是:SPAN#n3"
// 点击p元素自身区域,弹出:"最初触发事件的是:P#n2"
// 点击div元素自身区域,弹出:"最初触发事件的是:DIV#n1"

运行代码

  • CodePlayer技术交流群1
  • CodePlayer技术交流群2

0 条评论

撰写评论

打开导航菜单