CreateJS/TweenJS Losing Scope with "change" on Tween - scope

Question

I am on a frame in Animate by Adobe. When I add a "change" listener to my tween I lose scope when I hit the change function called animateParticle. Also related, the tween attached to the particle doesn't recognize .setPaused(true) function.
this.stop();
that = this;
var particleCount = 0;
var aParticle;
var mySpeed = 12;
var myRotation = 4;
var totalParticles = 5;
var stopParticles = false;
var particleHolder = new createjs.Container();
var mc_coll1 = this.parent.mc_coll0;
mc_coll1.setBounds(0,0,156,34);
var collission_ar = [this.parent.mc_coll0, this.parent.mc_coll1, this.parent.mc_coll2, this.parent.mc_coll3, this.parent.mc_coll4, this.parent.mc_coll5, this.parent.mc_coll6, this.parent.mc_coll7, this.parent.mc_coll8, this.parent.mc_coll9, this.parent.mc_coll10, this.parent.mc_coll11, this.parent.mc_coll12, this.parent.mc_coll13, this.parent.mc_coll14];
var totalCollisions = collission_ar.length;
this.addChild(particleHolder);
var xRange = width;
var yRange = height;
var scaleNum = 1;
//var collisionMethod = ndgmr.checkPixelCollision;
this.scaleX = 1;
this.scaleY = 1;
createParticles()
setTimeout(function(){
removeTimer();
//clearTimeout(that.pauseVar);
}, 2000)
function createParticles(){
var particle_ar = [];
var randNum = Math.ceil(Math.random() * totalParticles);
aParticle = new lib['MC_leaf'+randNum]();
aParticle.name = 'aParticle'+particleCount;
aParticle.x = Math.random() * xRange;
aParticle.y = -Math.random() * 15;
theNum = Math.random() * scaleNum;
aParticle.scaleX = theNum
aParticle.scaleY = theNum
aParticle.alpha = 1;
aParticle.collision = Math.floor(Math.random() * 2);
particleHolder.addChild(aParticle);
particleCount++;
var tween2 = createjs.Tween.get(aParticle).wait(0).to({y:yRange}, 2000, createjs.Ease.easeOut).call(removeObj,[aParticle], that).addEventListener('change', animateParticle.bind(that));
aParticle.tween = tween2;
if(!stopParticles){
timer = setTimeout(function() { createParticles() }, 100);
}
}
function animateParticle (event){
var part = event.currentTarget;
var mc_newColl;
console.log('part '+part.name);
for(var i=0; i < totalCollisions; i++){
// collision checking
mc_newColl = collission_ar[i];
var intersection = checkIntersection(part,mc_newColl);
if (intersection){
part.tween.setPaused(true);
//part.removeEventListener("tick", animateParticle.bind(that));
}
}
}
function checkIntersection(part, coll) {
if ( part.x >= coll.x + coll.width || part.x + part.width <= coll.x || part.y >= coll.y + coll.height || part.y + part.height <= coll.y ) return false;
return true;
}
function removeObj(part){
particleHolder.removeChild(part);
}
function removeTimer() {
stopParticles = true;
timer = clearInterval();
//var tween2 = createjs.Tween.get(particleHolder).wait(0).to({alpha:0}, 2000, createjs.Ease.easeOut);
}
//var timer = setInterval(function() { createParticles() }, 200, that);
var timer = setTimeout(function() { createParticles() }, 100, this);
In animateParticle, part is undefined.

Answer 1

The target of the change event will not be the particle, but the tween itself, since it is the dispatching object.
createjs.Tween.get(particle).to({x:1000}, 2000)
.on("change", function(event) {
console.log(event.target); // Tween
console.log(event.target.name); // undefined
console.log(event.target.target); // particle
console.log(event.target.target.name); // particle's name
}, that);
The undefined you are seeing is not the particle, but the name that you are logging.
Note that using on instead of addEventListener lets you pass a scope as a parameter instead of using bind.
Hope that helps.