Addeventlistener vs OnClick attribute

[Manan Joshi]

Hi All,

I today stumbled upon a case where in the addeventlistener did not work for click event on a checkbox(CC2017) and for button on CC2014. Searching the forum i found the following link mentioning the inconsistencies in ScriptUI Re: InDesign CC addEventListener not work

Now i see that in place of addeventlistener if i use onClick it works, tested on MAC for now. So one question would be what is difference between these two, and also what is the best approach to make things work on every platform and all versions of InDesign.

P.S. :- Is ScriptUI even recommended to be used, i use it for simple UI to prevent the hassle of using a CEP extension.

-Manan

[Peter Kahrel]

> So one question would be what is difference between these two

I think that custom event listeners (the ones you create with addEventListener) are more versatile than ScriptUI's onClick events. The latter are simpler to use.

> P.S. :- Is ScriptUI even recommended to be used, i use it for simple UI to prevent the hassle of using a CEP extension.

If ScriptUI works for you it works (it still does for me despite various bugs). It may not live forever, but by the time you can no longer use it (for whatever reason), CEP will have been replaced with something else, and you can save yourself the trouble of learning CEP.

P.

[Manan Joshi]

Thanks Peter for providing quite a prudent answer. I prefer the ease of use in ScriptUI over CEP in case of simple UI, lets see where the buck stops. Regarding the addeventlistener and attribute there has to be some difference in the manner in which they operate behind the scenes, that is the only explanation i can think of for one working and the other not.

-Manan

[Trevor:]

On the one hand the custom event listeners are / were more powerful allowing to do things you can't do with onClick and the like but since the swap over from CS to CC they had there guts ripped out from them and a lot of things that one could do one could no longer do. So I would recommend using whatever works. With a slight preference to onClick and the like because it has more chance of surviving future version.

Regarding CEP I disagree with Peter. It's true that CEP will be replaced but people with a CEP background will have a much easier time learning it's replacement than those who don't.

Ultimately one has to judge on a case by case bases. 1) Can it be done by script? 2) Is there some reason that one would want to use CEP?

[Manan Joshi]

Hi Trevorׅ

Thanks for the reply, well i do agree with your recommendation on how to decide whether to use ScriptUI or CEP, that is the reason i am more inclined towards using ScriptUI with very simple UI solution. The problem arises when something as simple as event handlers show a behaviour that is not reliable at all.

Trevorׅ  wrote

On the one hand the custom event listeners are / were more powerful allowing to do things you can't do with onClick

Could you please elaborate on this?

-Manan

[Trevor: · Accepted solution]

Hi Manan,

Sorry for my slow response. I have had and still have a bad case of flue.

I highly recommend reading both Peter Kahrel​'s excellent ScriptUI For Dummies and the "JavaScript Tools Guide CC.pdf " that one can get to via the ESTK (IMHO the only useful function of the ESTK)

The JavaScript Tools Guide CC.pdf  has a good section on UI including which eventListeners can be added to which elements and also which onEvents work for which elements.

Some example cases for using addEventListener() and not onEvents could be.

1) OnEvents don't provide the data of the event so if you want to monitor keyboard or mouse events addEventListener would be the way to go. (Which key was pressed with which modifier / Which mouse button was clicked / where on the screen)

2) Some elements like an image you can use addEventListener('click') / mouseup / mousedown but not onClick (AFAIK never tried image.onClick() but I don't think that it works)

3) addEventListener Events can be filtered by target or whatever filter one desires and then one can use eventObj.preventDefault ( ) and eventObj.stopPropagation ( )

4) One can listen and dispatch custom events.

HTH

Trevor

[Manan Joshi]

Thanks Trevor for providing this valuable information, i will surely look into these aspects. Wishing you a speedy recovery from the damned flu.

-Manan