e.target和e.currentTarget之间的区别
我不明白它们之间的区别,它们看起来都是一样的,但是我想它们不是。
任何时候使用一个或其他的例子将不胜感激。
本在他的回答中是完全正确的 – 所以请记住他所说的话。 我要告诉你的不是一个完整的解释,但是这是一个非常简单的方法来记住e.target
, e.currentTarget
如何处理鼠标事件和显示列表:
e.target
=鼠标下的东西(就像本说的那样,触发事件的东西)。 e.currentTarget
=点之前的东西…(见下文)
所以如果你有一个实例名称为“btns”的剪辑中有10个button,你可以这样做:
btns.addEventListener(MouseEvent.MOUSE_OVER, onOver); // btns = the thing before the dot of an addEventListener call function onOver(e:MouseEvent):void{ trace(e.target.name, e.currentTarget.name); }
e.target
将是10个button之一, e.currentTarget
将始终是“btns”剪辑。
值得注意的是,如果您将MouseEvent更改为ROLL_OVER或将属性btns.mouseChildren
设置为false,则e.target
和e.currentTarget
将始终为“btns”。
e.target
是什么触发事件调度器触发和e.currentTarget
是您分配给您的侦听器。
e.currentTarget
始终是事件实际绑定的元素。 e.target
是事件源自的元素,所以e.target
可以是e.currentTarget
的子e.currentTarget
,或者e.target
可以是=== e.currentTarget
,这取决于你的标记的结构。
值得注意的是,event.target可能是有用的,例如,使用单个侦听器触发不同的动作。 假设你有一个典型的“菜单”精灵,里面有10个button,所以不要这样做:
menu.button1.addEventListener(MouseEvent.CLICK, doAction1); menu.button2.addEventListener(MouseEvent.CLICK, doAction2); etc...
你可以简单地做:
menu.addEventListener(MouseEvent.CLICK, doAction);
并根据event.target触发doAction(event)中的其他操作(使用它的名称属性等)
e.currentTarget将始终返回添加了事件侦听器的组件。
另一方面,e.target可以是组件本身,也可以是接收该事件的任何直接的孩子或盛大的孩子或盛大的孩子等等。 换句话说,e.target返回显示列表层次结构顶部的组件,并且必须位于子层次结构或组件本身中。
一种用法可以是当您在“canvas”中包含多个“图像”时,并且您想要将图像拖到组件中而Canvas中。 你可以在Canvas上添加一个监听器,在这个监听器中你可以编写下面的代码来确保Canvas不会被拖拽。
function dragImageOnly(e:MouseEvent):void { if(e.target==e.currentTarget) { return; } else { Image(e.target).startDrag(); } }
举个例子:
var body = document.body, btn = document.getElementById( 'id' ); body.addEventListener( 'click', function( event ) { console.log( event.currentTarget === body ); console.log( event.target === btn ); }, false );
当你点击“btn”,“true”和“true”就会出现!
- e.target是元素,你可以点击
- e.currentTarget是添加了事件侦听器的元素。
如果你点击button的子元素,最好使用currentTarget来检测button的属性,在CH中它有时会使用e.target的问题。
我喜欢视觉答案。
当你点击#btn
,两个事件处理程序被调用,并输出你在图片中看到的内容。
在这里演示: https : //jsfiddle.net/ujhe1key/