JavaScript事件对象-PHP中文网问答

event对象包含与创建它的特定事件有关的属性和方法。
触发事件的类型不一样，可用的属性和方法也不一样。
下表中列出了通用的属性和方法。


属性/方法              类型          读/写   描述
bubbles                Boolean       只读    事件是否冒泡
cancelable             Boolean       只读    是否可以取消事件的默认行为
curentTarget           Element       只读    当前正在处理事件的事件处理程序的元素
detail                 Integer       只读    与事件相关的细节信息
eventPhase             Integer       只读    调用事件处理程序的阶段：1表示捕获阶段，2表示“处于目标”阶段，3表示冒泡阶段
preventDefault()       Function      只读    取消事件的默认行为
stopPropagation()      Function      只读    取消事件的进一步捕获或冒泡。如果bubbles为true则可以使用该方法
target                 Element       只读    事件的目标
type                   String        只读    被触发事件的类型
view                   AbstractView  只读    与事件关联的抽象视图。等同于发生事件的window对象


在事件处理程序的内部，对象this始终等于curentTarget的值，target包含的是事件的实际目标。

文中的curentTarget 和 target 到底有什么不一样？

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <style type="text/css"> #test{ width: 400px; height: 400px; background-color: blue; } #child{ width: 200px; height: 200px; background-color: red; } </style> </head> <body> <p id="test"> <p id="child"></p> </p> <script type="text/javascript"> document.getElementById("test").onclick = function (e) { console.log(e.target, e.currentTarget); }; </script> </body> </html>

<ul> <li> li <span>span</span> </li> </ul> <script type="text/javascript"> document.querySelector('ul').addEventListener('click', function(e){ console.log('target', e.target); console.log('curentTarget', e.currentTarget); }, false) </script>

全部回复(6)

怪我咯2017-04-11 12:30:58 6楼

直接一个demo，就明白了，target是说你的事件是由哪个dom触发的，而curretnTarget是说触发了哪个dom上的事件。

赞 +0

添加回复

迷茫2017-04-11 12:30:58 5楼

http://stackoverflow.com/ques...

PHP中文网2017-04-11 12:30:58 4楼

target 触发的事件的元素，也就是你实际点击的目标点击span 就是span,点击li 就是li
curentTarget 当前处理事件元素，示例中永远是ul

迷茫2017-04-11 12:30:58 3楼

currentTarget是绑定事件的对象，target是触发事件的对象，当然有时候它俩是一样的。
http://bbs.9ria.com/thread-88...

大家讲道理2017-04-11 12:30:58 2楼

你用过事件委托就明白什么不同了。

ringa_lee2017-04-11 12:30:58 1楼

举个例子

var toggleEvent = function(e){
    console.log(e.target);
    console.log(e.currentTarget);
}

<p onclick = toggleEvent()>
    <button>
        点我！
    </button>
</p>

这个时候target是button，currentTarget是p，因为p是绑定事件的对象