currenttarget和target的区别

currentTarget 定义和用法

currentTarget 事件属性返回其监听器触发事件的节点,即当前处理该事件的元素、文档或窗口。
在捕获和起泡阶段,该属性是非常有用的,因为在这两个节点,它不同于 target 属性。

语法:event.currentTarget

<html>
<head>

<script type="text/javascript">
function getEventTrigger(event)
  { 
  x=event.currentTarget; 
  alert("The id of the triggered element: "
  + x.id);
  }
</script>
</head>

<body >

<p id="p1" onmousedown="getEventTrigger(event)">
Click on this paragraph. An alert box will
show which element triggered the event.</p>

</body>
</html>

target定义和用法
target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。

语法:event.target

区别:
当没有事件委托的时候,currenttarge和target指的时同一个元素,如上面的案例
当有事件委托的时候,currenttarget一般指的是委托事件的元素,大多数时父元素,而目标元素是子元素

	$(document).ready(function(){
	  $("div").on("click","button",function(event){
		  console.log("currenttarget: "+JSON.stringify(event));
		   console.log("target: "+event.target)
	    $(event.delegateTarget).css("background-color", "pink");
	  });
	});

上面的例子:'div’是currenttarget,'button’是target

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章