说明
通过事件对象,可以获取到事件源
事件源:就是触发该事件的 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>