Using addEventListener

[Chuck Uebele]

I want to put an addEventListener on a group of radiobuttons so whichever button is selected the same function is run.  However, in the function can you use a term like currentTarget to tell which button was selected?  I know with actionScript you can use MouseEvent.CLICK in the listener then in the function event.currentTarget, but this does not seem to work.  The listener only likes 'click' and whatever I try with currentTarget generates a runtime error.  I know I can just use the onClick function for each button, but just wondering how to use the addEventListener.  For some reason, I always have a horrible time understanding Adobe's documentation.  This is for PS CS3 & PS CS4.  Thanks!

[Michael_L_Hale]

With radiobuttons I would use the built-in handlers something like this:

createDialog = function ( ) {
   var dlg = new Window( 'dialog', 'onClick Event Example Script' );
   dlg.rdPnl = dlg.add( 'panel', undefined );
   dlg.rdPnl.orientation = "row";
   dlg.rdPnl.alignment = "right";
   dlg.rdPnl.rd1 = dlg.rdPnl.add('radiobutton', undefined, 'one' );
   dlg.rdPnl.rd2 = dlg.rdPnl.add('radiobutton', undefined, 'two' );
   dlg.btnPnl = dlg.add( 'panel', undefined );
   dlg.btnPnl.orientation = "row";
   dlg.btnPnl.alignment = "right";
   dlg.btnPnl.preferredSize [ 80, 80 ]
   dlg.btnPnl.okBtn = dlg.btnPnl.add( 'button', undefined, 'Ok', { name:'ok' });
   dlg.btnPnl.cancelBtn = dlg.btnPnl.add( 'button', undefined, 'Cancel', { name:'cancel' });
   return dlg;
};
initializeDialog = function( w ) {
   // Set up initial control states

   w.rdPnl.rd1.onClick = rdClickEventHandler;
   w.rdPnl.rd2.onClick = rdClickEventHandler;
    with ( w.btnPnl ) {
         // The Ok and Cancel buttons close this dialog
         okBtn.onClick = function ( ) { this.parent.parent.close( 1 ); };
         cancelBtn.onClick = function ( ) { this.parent.parent.close( 2 ); };
      }   
 }

runDialog = function( w ) {
   return w.show( );
}
var win = createDialog();
initializeDialog(win);
runDialog(win)



function rdClickEventHandler () {
     try {
          alert( 'Called by radiobutton ' +this.text );
     }
     catch (e) {
     }
}

[Chuck Uebele]

Thanks, Mike.  I will do something like that.  I was just curious how the addEventListener worked with extendscript.

[Michael_L_Hale · Accepted solution]

Here is an example of adding an event handler to a control that doesn't already have a built-in handler:

createDialog = function ( ) {
   var dlg = new Window( 'dialog', 'Image Mouse Event Example Script' );
   var i = ScriptUI.newImage( new File('/c/k.png'));
   dlg.image = dlg.add ('image' , undefined,  i, {name:'temp'});// also accepts jpg
   dlg.btnPnl = dlg.add( 'panel', undefined );
   dlg.btnPnl.orientation = "row";
   dlg.btnPnl.alignment = "right";
   dlg.btnPnl.preferredSize [ 80, 80 ]
   dlg.btnPnl.okBtn = dlg.btnPnl.add( 'button', undefined, 'Ok', { name:'ok' });
   dlg.btnPnl.cancelBtn = dlg.btnPnl.add( 'button', undefined, 'Cancel', { name:'cancel' });
   return dlg;
};
initializeDialog = function( w ) {
   // Set up initial control states
   ScriptUI.events.createEvent('MouseEvent');
   w.image.addEventListener ('mouseover', btnMouseEventHandler, false);
   w.image.addEventListener ('mouseout', btnMouseEventHandler, false);
    with ( w.btnPnl ) {
         // The Ok and Cancel buttons close this dialog
         okBtn.onClick = function ( ) { this.parent.parent.close( 1 ); };
         cancelBtn.onClick = function ( ) { this.parent.parent.close( 2 ); };
      }   
 }

runDialog = function( w ) {
   return w.show( );
};
var win = createDialog();
initializeDialog(win);
runDialog(win)



function btnMouseEventHandler (event) {
     try {
          var m = event.type// 'mouseover or mouseout
          if ( m == 'mouseover' ) win.image.icon = new File('/c/t.png');
          if ( m == 'mouseout' ) win.image.icon = new File('/c/k.png');
     }
     catch (e) {
     }
}

[Chuck Uebele]

Thanks again, Mike.  So it looks like you attach a listener to each item and then run the function you want rather than set a listener on the parent and use currentTarget in the handler.

Chuck

[Michael_L_Hale]

That is the way that I do it but as you said the guide is unclear, there may be other ways.

It does seem that child controls inherit the parent's handlers so if you attach a mouse over to the window an event will fire as the user mouses over each element. But a quick test has currentTarget always returning the window object( type = dialog ) so I would think that the only way you would know what control fired the event would be to work out where the control is and use clientX and clientY.

Seems eaiser to just give each element that needs one it's own handler.

[Chuck Uebele]

I believe you're right, Mike.