Hello!
Check out this snippet:
#
target illustratorfunction test(){
var w = new Window("dialog", "Test");
var button_1 = w.add("button", undefined, "onClick");
var button_2 = w.add("button", undefined, "addEventListener('click')");
var button_3 = w.add("button", undefined, "addEventListener('mousedown')");
var button_4 = w.add("button", undefined, "Both events");
var button_5 = w.add("button", undefined, "Both 'click' events");
var btn_ok = w.add("button", undefined, "Ok");
button_1.onClick = function(){
var thisButton = this;
alert(
"onClick event is here.\nThis button's text is: \"" + thisButton.text + "\""
);
};
button_2.addEventListener("click", function(){
var thisButton = this;
alert(
"addEventListener('click') event is here.\nThis button's text is: \"" + thisButton.text + "\""
);
});
button_3.addEventListener("mousedown", function(){
var thisButton = this;
alert(
"addEventListener('mousedown') event is here.\nThis button's text is: \"" + thisButton.text + "\""
);
});
button_4.onClick = function(){
var thisButton = this;
alert(
"onClick event is here.\nThis button's text is: \"" + thisButton.text + "\""
);
};
button_4.addEventListener("mousedown", function(){
var thisButton = this;
thisButton.text = "NEW TEXT!";
alert(
"addEventListener('mousedown') event is here.\nThis button's text is: \"" + thisButton.text + "\""
);
});
button_5.onClick = function(){
var thisButton = this;
alert(
"onClick event is here.\nThis button's text is: \"" + thisButton.text + "\""
);
};
button_5.addEventListener("click", function(){
var thisButton = this;
alert(
"addEventListener('click') event is here.\nThis button's text is: \"" + thisButton.text + "\""
);
});
w.show();
};
test();
In here when you run it, you can see four buttons. The first three show the way the 'click' and onClick methods of assigning the click event work. You can observe they have the exact same result - but the 'mousedown' event is a little different from the others.
Proceed down to the 4th button which has both an onClick and a 'mousedown' event assigned. You will see they both fire, but in a specific order. When the mousedown event goes, it also changes the text of the button - the subsequent onClick picks up on that new text.
When looking at the way the 5th button works, you will see that when an onClick and a 'click' event are both assigned to the same element, it's the onClick that takes precedence and becomes the only click event fired when pressing this button.
What's the practical difference for us when using ScriptUI between the two kinds of events? Well, in some cases it's more convenient or the only alternative, due to how some elements respond to the various types of events as well as their timing. For example, using a mousedown to pre-process something in your UI prior to an onClick event doing its own work such as in my example.
In another instance, when using a listbox there's really not an onClick that works on a listbox - only onDoubleClick. The other event is when a highlighted list item is clicked on inside the listbox, which is almost an 'onClick' but not quite as it never fires when you click on the one list item that's already selected. What if you want something to happen when this listbox is just clicked on? That is now a job for the 'mousedown' event listener added with the addEventListener function - it can give you something to work with within the context of your user clicking once inside your listbox somewhere.
You can also trigger events via the function element.notify("onClick") to activate some button's event without having the user actually click it. This becomes very useful in more complex UI where making a change to some controls will make it necessary to run a bunch of code that is duplicated from the code inside event functions (or handlers/callbacks as they are sometimes called).
You can simply do the one portion of the one control at and and trigger an event from some other button so that the user doesn't have to click more - this is the case for something like a 'refresh' button.
1 Correct answer
3
Replies
AdChoices