0

In jQuery I can do something like:

$('#example').click();

What is the equivalent in raw Javascript? I have tried the following:

document.getElementById('example').click();

But that doesn't seem to work. Thanks!

mike
  • 8,041
  • 19
  • 53
  • 68
  • 1
    simply run the function that is supposed to happen on click – Ibu Apr 26 '12 at 18:25
  • 1
    possible duplicate of [How to trigger event in javascript](http://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript) – AlienWebguy Apr 26 '12 at 18:25
  • @Ibu - that'snot possible in this case... – mike Apr 26 '12 at 18:29
  • I think your requirement is same as, http://stackoverflow.com/questions/906486/how-can-i-programmatically-invoke-an-onclick-event-from-a-anchor-tag-while-kee Or may be this can be useful too, http://www.codingforums.com/showthread.php?t=124704 – vbjain Apr 26 '12 at 18:31
  • @mike no but there is a search feature. – AlienWebguy Apr 26 '12 at 18:41
  • @BenniKa - Yes! just implemented it! Thanks so much! – mike Apr 26 '12 at 19:53
  • @AlienWebguy I tried searching... 90% of the search results are jQuery related. – mike Apr 26 '12 at 19:55

1 Answers1

4

I use this in my framework:

    function fireEvent() {
        var eventType = null, i, j, k, l, event,
            einstellungen = {
            'pointerX': 0,
            'pointerY': 0,
            'button': 0,
            'ctrlKey': false,
            'altKey': false,
            'shiftKey': false,
            'metaKey': false,
            'bubbles': true,
            'cancelable': true
        }, moeglicheEvents = [
            ['HTMLEvents', ['load', 'unload', 'abort', 'error', 'select', 'change', 'submit', 'reset', 'focus', 'blur', 'resize', 'scroll']],
            ['MouseEvents', ['click', 'dblclick', 'mousedown', 'mouseup', 'mouseover', 'mousemove', 'mouseout']]
        ];

        for(i=0,j=moeglicheEvents.length;i<j;++i) {
            for(k=0,l=moeglicheEvents[i][1].length;k<l;++k) {
                if(arguments[1] === moeglicheEvents[i][1][k]) {
                    eventType = moeglicheEvents[i][0]; i = j; k = l;
                }
            }
        }

        if(arguments.length > 2) {
            if((typeof arguments[2]) === 'object') {
                change(einstellungen, arguments[2]);
            }
        }

        if(eventType === null) {
            throw new SyntaxError('Event type "' + arguments[1] + '" is not implemented!');
        }

        if(document.createEvent) {
            event = document.createEvent(eventType);

            if(eventType === 'HTMLEvents') {
                event.initEvent(arguments[1], einstellungen.bubbles, einstellungen.cancalable);
            } else {
                event.initMouseEvent(arguments[1], einstellungen.bubbles, einstellungen.cancelable, document.defaultView,
                    einstellungen.button, einstellungen.pointerX, einstellungen.pointerY, einstellungen.pointerX, einstellungen.pointerY,
                    einstellungen.ctrlKey, einstellungen.altKey, einstellungen.shiftKey, einstellungen.metaKey, einstellungen.button, arguments[0]);
            }

            arguments[0].dispatchEvent(event);
        } else {
            einstellungen.clientX = einstellungen.pointerX;
            einstellungen.clientY = einstellungen.pointerY;

            event = document.createEventObject();

            event = extend(event, einstellungen);

            arguments[0].fireEvent('on' + arguments[1], event);
        }
    }

argument 1 is the element, the second argument the event, the third (optional) options.

Sorry, i forgot to rewrite some parts:

_.isObject() to (typeof arguments[2]) == 'object'

and _.change to change and this function is needed:

function change() {
    var name;

    for(name in arguments[1]) {
        if((typeof arguments[1][name]) === 'object') {
            if((typeof arguments[0][name]) === 'undefined') {
                arguments[0][name] = {};
            }

            change(arguments[0][name], arguments[1][name]);
        } else {
            arguments[0][name] = arguments[1][name];
        }
    }

    return arguments[0];
};

Edit:

In your case it would be fireEvent(document.getElementById('example'), 'click');

Ben
  • 54,723
  • 49
  • 178
  • 224
  • 2
    @RakeshJuyal thats German. I often mix German and English names in my scripts (I'm from Germany). –  Apr 27 '12 at 07:28
  • Could you extract just the fire-click-event please ? x) this works but is not readable xD thanks ! – jave.web Nov 01 '13 at 18:51