Event對象中的target屬性和currentTarget屬性的區別

時間 2019-12-10

標籤 event 對象 target 屬性 currenttarget 區別简体版

原文原文鏈接

　　先上結論：spa

　　Event.target：觸發事件的元素；code

　　Event.currentTarget：事件綁定的元素；blog

　　經過下面的例子來理解這兩個屬性的區別：事件

　　使用Event.target屬性的例子：（我在<body>和<button>上都綁定了click事件）ip

 1 <body onclick="mouseEvent1()">
 2     <button onclick="mouseEvent2()">點我</button>
 3     <script type="text/JavaScript">
 4         function mouseEvent1() {
 5             console.log("body觸發的");
 6             console.log(event.target);
 7         }        
 8         function mouseEvent2() {
 9             console.log("button觸發的");
10             console.log(event.target);
11         }
12     </script>
13 </body>

　　由於<button>在<body>中，因此點擊<button>的同時也至關於點擊了<body>（我的理解），觸發<button>點擊事件的同時也觸發了<body>的點擊事件。get

　　運行效果以下：io

　　咱們點擊<button>，返回的元素都是<button>元素。console

　　接下來咱們把全部target換成currentTarget：event

 1 <body onclick="mouseEvent1()">
 2     <button onclick="mouseEvent2()">點我</button>
 3     <script type="text/JavaScript">
 4         function mouseEvent1() {
 5             console.log("body觸發的");
 6             console.log(event.currentTarget);
 7         }        
 8         function mouseEvent2() {
 9             console.log("button觸發的");
10             console.log(event.currentTarget);
11         }
12     </script>
13 </body>

　　運行效果以下：function

　　點擊<button>，返回了<button>元素和<body>元素。

相關標籤/搜索