Inspiring

Answered

How to make .on and .addEventListener code versions work?

Forum|Forum|3 years ago
March 16, 2022
1 reply
397 views

Hi, I'm just trying to figure out how the codes work. I know .on is like a shortcut and it works like this:

this.circle_mc.on("pressmove", function (evt) {
	var point = stage.globalToLocal(evt.stageX, evt.stageY)
	evt.currentTarget.x = point.x;
	evt.currentTarget.y = point.y;
});

so I thought the .addEventListener way would work too, but it doesn't.

this.circle_mc.addEventListener("pressmove", evt.bind(this));

function evt() {
	var point = stage.globalToLocal(evt.stageX, evt.stageY)
	this.circle_mc.x = point.x;
	this.circle_mc.y = point.y;
}

but it doesn't. How do you make the .addEventListener version work?

This topic has been closed for replies.

Correct answer JoãoCésar17023019

Hi.

I think the confusion came from the name you gave to the function that handles the event in the addEventListener approach.

You called it evt but you also use evt as the name for the event object in the on approach.

So, if you do something like this...

function evt(e) {
	var point = stage.globalToLocal(e.stageX, e.stageY)
	this.circle_mc.x = point.x;
	this.circle_mc.y = point.y;
}

... it should work.

Please let us know.

Regards,

JC

JoãoCésar17023019

Correct answer

Community Expert

Hi.

I think the confusion came from the name you gave to the function that handles the event in the addEventListener approach.

You called it evt but you also use evt as the name for the event object in the on approach.

So, if you do something like this...

function evt(e) {
	var point = stage.globalToLocal(e.stageX, e.stageY)
	this.circle_mc.x = point.x;
	this.circle_mc.y = point.y;
}

... it should work.

Please let us know.

Regards,

JC

Trial10Author

Inspiring

Thanks, it works! I didn't know you can insert letters/names in the function's parentheses like that.

So in your code, the function's name is "evt", but is the "e" inside its parentheses a name for it too? Haha, I'm trying to figure that out.

I also found that using stage.mouseX, and stage.mouseY somehow works and mimics the .on approach in my original post:

this.circle_mc.addEventListener("pressmove", evt.bind(this));

function evt() {
    var point = stage.globalToLocal(stage.mouseX, stage.mouseY)
    this.circle_mc.x = point.x;
    this.circle_mc.y = point.y;
}

I would like to understand more about the "e" in function evt(e) thing in your code, if it's possible for you to explain it. 🙂

JoãoCésar17023019

Community Expert

Great!

I'm glad it worked.

Every function we use as an event handler receives an object containing all the information about the event added/fired.

Any name that follows variable naming rules can be given to that object.

A simple and silly example for you to understand this JavaScript concept:

function getHiddenMessage(callback)
{
	callback("the cake is a lie");
}

function reveal(message)
{
	console.log(message);
}

getHiddenMessage(reveal);

You can read more about adding event listeners here and here.

I hope it helps.

Regards,

JC

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded