简单的说,e.curretnTarge是指注册了事件监听器的对象,e.target是指对象里的子对象,实际触发这个事件的对象。
在《JavaScript高级高级程序设计》中,对这2个属性说明如下:
属性/方法 | 类型 | 读/写 | 说明 |
target | Element | 只读 | 事件的目标 |
currentTarget | Element | 只读 | 其事件处理程序当前正在处理事件的那个元素 |
我们通过一个简单的例子来说明:
click outerclick inner
function $(id){ return document.getElementById(id); } function addEvent(obj, ev, handler){ if(window.attachEvent){ obj.attachEvent("on" + ev, handler); }else if(window.addEventListener){ obj.addEventListener(ev, handler, false); } } function test(e){ alert("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName); } var outer = $("outer"); var inner = $("inner"); addEvent(inner, "click", test); addEvent(outer, "click", test);
在outer上点击时,target跟currentTarget是一样的,都是div,而在inner上点击时,e.target是p、e.currentTarget是div。
目前,我也对这2个属性似懂非懂,通过翻阅资料才对其有了个初步的认识。