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

Explorer ,
Mar 16, 2022 Mar 16, 2022

Copy link to clipboard

Copied

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?

TOPICS
Code , How to

Views

77

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Mar 16, 2022 Mar 16, 2022
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

Likes

Translate

Translate
Adobe Community Professional ,
Mar 16, 2022 Mar 16, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 16, 2022 Mar 16, 2022

Copy link to clipboard

Copied

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. 🙂

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 16, 2022 Mar 16, 2022

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines