e.target和e.currentarget還有this的區別
阿新 • • 發佈:2018-12-15
target在事件流的目標階段;currentTarget在事件流的捕獲,目標及冒泡階段。只有當事件流處在目標階段的時候,兩個的指向才是一樣的, 而當處於捕獲和冒泡階段的時候,target指向被單擊的物件而currentTarget指向當前事件活動的物件(註冊該事件的物件)(一般為父級)。this指向永遠和currentTarget指向一致(只考慮this的普通函式呼叫)。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css" rel="stylesheet"> #fa{ width: 100%; height: 170px; padding: 20px 0px; background-color: cadetblue; } #son{ width: 100%; height: 20px; padding: 30px 0px; background-color: black; color: white; text-align: center; cursor: pointer; } </style> </head> <body> <div id="fa" onmousedown="getEventTrigger(event)"> <p id="son" onmousedown="getEventTrigger(event)">點我試試</p> </div> </body> <script type="text/javascript"> var fa = document.getElementById('fa'); var son = document.getElementById('son'); function getEventTrigger(event) { x=event.currentTarget; y=event.target; alert("currentTarget 指向: " + x.id + ", target指向:" + y.id); } </script> </html>