event.currentTarget identifies the current target for the event, as the event traverses the DOM. It always refers to the element the event handler has been attached to as opposed to event.target which identifies the element on which the event occurred.
即,event.currentTarget指向事件所綁定的元素,而event.target始終指向事件發生時的元素。翻譯的不專業,好拗口啊,還是直接上測試代碼吧:
復制代碼 代碼如下:
<div id="wrapper">
<a href="#" id="inner">click here!</a>
</div>
<script type="text/javascript" src="source/jquery.js"></script>
<script>
$('#wrapper').click(function(e) {
console.log('#wrapper');
console.log(e.currentTarget);
console.log(e.target);
});
$('#inner').click(function(e) {
console.log('#inner');
console.log(e.currentTarget);
console.log(e.target);
});
/*
以上測試輸出如下:
當點擊click here!時click會向上冒泡,輸出如下:
#inner
<a href="#" id="inner">click here!</a>
<a href="#" id="inner">click here!</a>
#wrapper
<div id="wrapper">…</div>
<a href="#" id="inner">click here!</a>
當點擊click here!時click會向上冒泡,輸出如下:
#wrapper
<div id="wrapper">…</div>
<div id="wrapper">…</div>
*/
</script>