I have a link that has a listener attached to it (I'm using YUI):

YAHOO.util.Event.on(Element, 'click', function(){ /* some functionality */});

I would like to the same functionality to happen in another scenario that doesn't involve a user-click. Ideally I could just simulate "clicking" on the Element and have the functionality automatically fire. How could I do this? Too bad this doesn't work:

$('Element').click()

Thanks.

I have a link that has a listener attached to it (I'm using YUI):

YAHOO.util.Event.on(Element, 'click', function(){ /* some functionality */});

I would like to the same functionality to happen in another scenario that doesn't involve a user-click. Ideally I could just simulate "clicking" on the Element and have the functionality automatically fire. How could I do this? Too bad this doesn't work:

$('Element').click()

Thanks.

• javascript
• yui

7 Answers 7

MDC has a good example of using dispatchEvent to simulate click events.

Here is some code to simulate a click on an element that also checks if something canceled the event:

function simulateClick(elm) {
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);
  var canceled = !elm.dispatchEvent(evt);
  if(canceled) {
    // A handler called preventDefault
    // uh-oh, did some XSS hack your site?
  } else {
    // None of the handlers called preventDefault
    // do stuff
  }
}

You're looking for fireEvent (IE) and dispatchEvent (others).

For YUI 3 this is all wrapped up nicely in Y.Event.simulate():

YUI().use("node", function(Y) {
    Y.Event.simulate(document.body, "click", { shiftKey: true })
})

You can declare your function separately.

function DoThisOnClick () {
}

Then assign it to onclick event as you do right now, e.g.:

YAHOO.util.Event.on(Element, 'click', DoThisOnClick)

And you can call it whenever you want :-)

DoThisOnClick ()

In case anyone bumps into this looking for a framework agnostic way to fire any HTML and Mouse event, have a look here: How to simulate a mouse click using JavaScript?

1) FIRST SOLUTION

The article http://mattsnider.com/simulating-events-using-yui/ describes how to simulate a click using YAHOO:

var simulateClickEvent = function(elem) {
    var node = YAHOO.util.Dom.get(elem);

    while (node && window !== node) {
        var listeners = YAHOO.util.Event.getListeners(node, 'click');

        if (listeners && listeners.length) {
            listeners.batch(function(o) {
                o.fn.call(o.adjust ? o.scope : this, {target: node}, o.obj);
            });
        }

        node = node.parentNode;
    }
};

As you can see, the function loops over the node and its parents and for each of them gets the list of listeners and calls them.

2) SECOND SOLUTION

There is also another way to do it. For example:

var elem = YAHOO.util.Dom.get("id-of-the-element");
elem.fireEvent("click", {});

where function is used as

3) THIRD SOLUTION

Version 2.9 of YUI2 has a better solution: http://yui.github.io/yui2/docs/yui_2.9.0_full/docs/YAHOO.util.UserAction.html

4) FORTH SOLUTION

YUI3 has also a better and clean solution: http://yuilibrary.com/yui/docs/event/simulate.html

Of course $('Element').click() won't work, but it can if you include jquery, it works well alongside yui.

As I untestand you need to do the following:

function myfunc(){
//functionality
}

YAHOO.util.Event.on(Element, 'click', myfunc);

Then call myfunc when something else needs to happen.

The inability to simulate a user-click on an arbitrary element is intentional, and for obvious reasons.