onClick - get reference to function AND hardcoded parameters

Question

I am using phantomJS, which doesn't seem to fire inline on[click/change/whatever] events by default when you interact with a DOM element - you need to get a reference to them and then invoke them explicitly like so;

var element = document.getElementById('myId');
element.dispatchEvent(new Event('click'));

Or like this:

var element = document.getElementById('myId');
if(element.onclick) element.onclick();

This is working fine for function calls without arguments but I have cases where the on[click/change/whatever] function call has some hardcoded parameters like so:

<input type="text" value="some val" onclick="someFunction('hardcodedString1', 'hardcodedString2')">

Where some function is just a function accepting two strings as parameters.

I know I can get a reference to the onclick function like this:

var click = element.onclick;

But how can I get a reference to the arguments too, or a reference to the function including the arguments so that I can just invoke it and it will behave exactly the same as when clicked in a browser?

Something like:

var click = element.onclick;
var argsList = element.onclick.args;
click(argsList);

Try `(element.onclick)();` (`.onclick` is an anonymous function wrapping the `onclick` text) — Chris G, May 15 '17 at 16:18
I don't understand the problem. The event itself is totally agnostic to any parameters you hand over to eventlisteners (especially if they are hardcoded). Dispatching an event will automatically invoke the handler with the parameters you defined in the first place. The only problem I see is that synthetic events lack a few attributes that real browser events have - which seems unrelated to your question. — Christoph, May 15 '17 at 16:25

quirimmo · Accepted Answer · 2017-05-15T16:34:51.650

0

You should be able to achieve that just calling click() and you will call it with the same parameters.

HTML:

<button id="my-button" onclick="test('hello world')">
  TEST
</button>

<button onclick="triggerTest()">
  TRIGGER TEST
</button>

JS:

function test(word) {
  alert(word);
}

function triggerTest() {
  document.querySelector('#my-button').click();
}

https://jsfiddle.net/L5g1mot2/2/

At the same time, if you want to call the same function referring to it, you can do the following:

function triggerTest() {
  var tempClick = document.querySelector('#my-button').onclick;
  tempClick.call(tempClick);
}

https://jsfiddle.net/6xk31p1u/1/

edited May 15 '17 at 16:34

answered May 15 '17 at 16:21

quirimmo

9,161
1
24
43

That's still just clicking the element though - I have forked and edited your example to show what I mean: https://jsfiddle.net/6xk31p1u/ – thisextendsthat May 15 '17 at 16:29
You are welcome. Updating the answer just if it will be useful for someone else – quirimmo May 15 '17 at 16:33
@thisextendsthat this error is not related to the initial problem of emitting events manually - it is a problem of [losing context](http://stackoverflow.com/questions/9677985/uncaught-typeerror-illegal-invocation-in-chrome). If you called it right away, there would not be any problems: https://jsfiddle.net/6xk31p1u/2/ – Christoph May 15 '17 at 16:42

onClick - get reference to function AND hardcoded parameters

1 Answers1