How to call Javascript event function

Question

How to call a Javascript event from another Javascript function by obtaining this event via getter?

Some example code is below:

<script type="text/javascript">
    function keyDownHandler(elem, e)
    {
       var keyId = e.keyCode;
       if(keyId === 13)
       {
          var clickMethod = elem.onclick;
          //now call the clickHandler method.
       }
    }
    </script>
    
    
    <input type="text" onkeydown="keyDownHandler(this, event)"
           onclick="clickHandler(this)" />

I want to invoke the method defined in onclick attribute of the input field.

see below example for solution

Manish Nagar
– Manish Nagar

2013-01-22 12:00:09 +00:00
Commented Jan 22, 2013 at 12:00 — Manish Nagar
– Manish Nagar, Commented Jan 22, 2013 at 12:00
Did you try invoking it? What happened?

Felix Kling
– Felix Kling

2013-01-22 12:00:10 +00:00
Commented Jan 22, 2013 at 12:00 — Felix Kling
– Felix Kling, Commented Jan 22, 2013 at 12:00

Rahul R. · Accepted Answer · 2013-01-22 13:02:59Z

4

As Tim S. said, you can directly call handler, however if you really want to call the event, you can use Jquery 'trigger'.

$(elem).trigger('click')

if elem is not jquery object.

Edit: jquery is not required. The code should work by just adding the parenthesis in onclick call.

function keyDownHandler(elem, e) {
            var keyId = e.keyCode;
            if (keyId === 13) {
                elem.onclick();
            }
        }

clickHandler must be defined.

edited Jan 22, 2013 at 13:02

answered Jan 22, 2013 at 11:57

Rahul R.

6,5413 gold badges30 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Felix Kling Over a year ago

OP does not seem to use jQuery, so he would have to included it, and elm would have to be a jQuery object.

Rahul R. Over a year ago

no, its the element which is passed in the function 'elem' or you can get it using $("#elementId") or document.getElementById("elementId")

Felix Kling Over a year ago

Of course... but it still has to be a jQuery object, not the DOM element. In the OP's code it's a DOM element.

Tim S. Over a year ago

That moment when one does not knows the difference between a DOM and an jQuery object.

Rahul R. Over a year ago

yes, thats correct, if he can use Jquery its just the matter of wrapping it in $ e.g. $(elem).trigger('click')

|

Arun P Johny · Accepted Answer · 2013-01-22 11:56:47Z

1

I wouldn't recommend that.

You need to abstract the shared login out of the onclick handler as a separate method and then call the method from both the event handlers.

function sharedloginc(some arguments...) {
    //do something
}

function keyDownHandler(el, e) {
    //do something
    sharedloginc(....)   
}

function clickHandler(el, e){
    sharedloginc(....)
}

answered Jan 22, 2013 at 11:56

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Tim S. · Accepted Answer · 2013-01-22 12:32:00Z

0

Why not use

<script type="text/javascript">
function keyDownHandler(elem, e)
{
    var keyId = e.keyCode;

    if(keyId === 13)
    {
        // call function, normally
        clickHandler(elem, null);
    }
}
</script>

I have set the event argument null, because, well, you can't generate a (correct!) event object.

Okay after some playing around I have managed to make this:

<script type="text/javascript">
function keydown_handler(el, e) {
    var click, code = e.keyCode;

    if(code === 13) {
        var handler = el.onclick;

        if(typeof handler === 'function') {
            handler.apply(this, el, null);
        }
    }
}

function click_handler(el, e) {
    alert('clicked!');
}
</script>

<input type="text" onkeydown="keydown_handler(this, event);" onclick="click_handler(this, event);" />

It seems to work, but I can't verify it works in all browsers at this point.

edited Jan 22, 2013 at 12:32

answered Jan 22, 2013 at 11:53

Tim S.

13.9k9 gold badges49 silver badges73 bronze badges

1 Comment

ZeDonDino Over a year ago

well thanks but i want the original function to be called. That one defined in the onlick attribute

ViHdzP · Accepted Answer · 2020-12-25 08:20:46Z

0

This example will solve your problem.

<html>
<head>
<title>Testing</title>
</head>
<body>
             <script type="text/javascript">
                 function keyDownHandler(elem, e)
                   {
                       var keyId = e.keyCode;
                       if(keyId == 13)
                       {
                         // var clickMethod = elem.onclick;
                          clickHandler(elem, e);
                        }
                   }
                  function clickHandler(elem, e)
                  {
                    alert("clickHandler");
                  }
           </script>
       <input type="text" onkeydown="keyDownHandler(this, event)" onclick="clickHandler(this, event)" />
</body>
</html>

edited Dec 25, 2020 at 8:20

ViHdzP

1097 bronze badges

answered Jan 22, 2013 at 11:57

Manish Nagar

1,0467 silver badges12 bronze badges

1 Comment

Manish Nagar Over a year ago

in which browser you are running your page

resti · Accepted Answer · 2023-12-20 16:58:08Z

0

If you are looking for a one-liner within keydown/keyup event attributes. These are the possible options.

for executing the onclick/click event on the same element.

((e)=>{if(e.keycode===13) click():})(event)

or

((e)=>{if(e.keycode===13) this.click()})(event)

for executing the onclick/click event by elementID.

((e)=>{if(e.keycode===13) elementID.click()})(event)

edited Dec 20, 2023 at 16:58

answered Dec 20, 2023 at 16:40

resti

12 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to call Javascript event function

5 Answers 5

6 Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related