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

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