JavaScript教程：事件对象-获取事件源：target和currentTarget 作者：马育民 • 2023-11-01 08:44 • 阅读：10094 # 说明 通过事件对象，可以获取到事件源 事件源：就是触发该事件的 DOM 对象 # 获取方式 通过事件对象的 `target` 和 `currentTarget` - target：触发该事件的 DOM 对象 - currentTarget：触发该事件的 DOM 对象。在 **冒泡触发父元素的事件函数时**，该对象是 **父元素的 DOM 对象** ### target 和 currentTarget 相同 当点击按钮时，触发按钮的响应函数，此时 `target` 和 `currentTarget` 相同 ``` <input type="button" value="按钮" id="btn" /> <script type="text/javascript"> document.getElementById("btn").addEventListener("click",function(e){ // 事件源，触发该事件的标签 console.log("btn--target:",e.target) console.log("btn--currentTarget:",e.currentTarget) }) </script> ``` ### target 和 currentTarget 不相同 当点击按钮时，由于冒泡机制，触发按钮的 **父元素的响应函数**，此时 `target` 和 `currentTarget` 不相同 ``` <input type="button" value="按钮" id="btn" /> <script type="text/javascript"> // 按钮事件 document.getElementById("btn").addEventListener("click",function(e){ // 事件源，触发该事件的标签 console.log("btn--target:",e.target) console.log("btn--currentTarget:",e.currentTarget) }) // body事件 document.body.addEventListener("click",function(e){ // 事件源，触发该事件的标签 console.log("body--target:",e.target) // 按钮的dom对象 console.log("body--currentTarget:",e.currentTarget) // 父元素的dom对象 }) // html事件 document.documentElement.addEventListener("click",function(e){ // 事件源，触发该事件的标签 console.log("html--target:",e.target) // 按钮的dom对象 console.log("html--currentTarget:",e.currentTarget) // 父元素的dom对象 }) </script> ``` 原文出处：http://malaoshi.top/show_1IX6WEL4Olzi.html