how to get javaScript event source element

Question

Is there a way to retrieve the element source of an inline javaScript call   I have a button like this    lt button onclick  doSomething  param    id  id button  gt action lt  button gt    Note    the button is generated from server I cannot modify the generation process several buttons are generated on the page  I have control only on client side    What I have tried   function doSomething param       var source   event target    event srcElement      console log source       On firebug I get event is not defined  Edit  After some answers  an override of the event handling using jQuery is very acceptable  My issue is how to call the original onClick function with it s original prameters  and without knowing the function name   code    lt button onclick  doSomething  param    id  id button1  gt action1 lt  button gt   lt button onclick  doAnotherSomething  param1    param2    id  id button1  gt action2 lt  button gt    lt button onclick  doDifferentThing    id  id button3  gt action3 lt  button gt      and so on     So the override would be     document  on  click    button   function e      e preventDefault      var action     this  attr  onclick               What to do here to call      - doSomething this   param    if button1 is clicked      - doAnotherSomething this   param1    param2    if button2 is clicked      - doDifferentThing this   if button3 is clicked      there are many buttons with many functions

User · Answer

Try something like this    lt html gt     lt body gt        lt script type  text javascript  gt          function doSomething event              var source   event target    event srcElement            console log source             alert  test              if window event                   IE8 and earlier                doSomething              else if e which                   IE9 Firefox Chrome Opera Safari                doSomething                              lt  script gt        lt button onclick  doSomething  param    id  id button  gt        action      lt  button gt      lt  body gt         lt  html gt

User · Answer

I believe the solution by  slipset was correct  but wasn t cross-browser ready   According to Javascript info  events  when referenced outside markup events  are cross-browser ready once you assure it s defined with this simple line  event   event    window event   So the complete cross-browser ready function would look like this   function doSomething param     event   event    window event    var source   event target    event srcElement    console log source

User · Answer

You can pass this when you call the function   lt button onclick  doSomething  param  this   id  id button  gt action lt  button gt    lt script gt      function doSomething param me        var source   me     console log source      lt  script gt

User · Answer

USE   live          selector  live events  data  handler      As of jQuery 1 7  the  live   method is deprecated  Use  on   to attach event handlers      document  on events  selector  data  handler

User · Answer

Your html should be like this     lt button onclick  doSomething  id  id button  gt action lt  button gt    And renaming your input-paramter to event like this   function doSomething event       var source   event target    event srcElement      console log source       would solve your problem   As a side note  I d suggest taking a look at jQuery and unobtrusive javascript

User · Answer

You should change the generated HTML to not use inline javascript  and use addEventListener instead   If you can not in any way change the HTML  you could get the onclick attributes  the functions and arguments used  and  convert  it to unobtrusive javascript instead by removing the onclick handlers  and using event listeners   We d start by getting the values from the attributes   x000D   x000D     button   each function i  el    x000D      var funcs       x000D   x000D     el  attr  onclick   split      map function item    x000D       var fn       item split      shift    x000D           params   item match                  x000D              args  x000D               x000D          if  params  amp  amp  params length    x000D           args   params 1  split       x000D              if  args  amp  amp  args length    x000D                  args   args map function par    x000D                return par trim   replace       g      x000D                   x000D                x000D            x000D          funcs push  fn  args        x000D          x000D     x000D        el  data  args   funcs      store in jQuery s   data x000D     x000D      console log    el  data  args      x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt button onclick  doSomething  param    id  id button1  gt action1 lt  button gt  x000D   lt button onclick  doAnotherSomething  param1    param2    id  id button1  gt action2 lt  button gt   x000D   lt button onclick  doDifferentThing    id  id button3  gt action3 lt  button gt  x000D   x000D   x000D    That gives us an array of all and any global methods called by the onclick attribute  and the arguments passed  so we can replicate it   Then we d just remove all the inline javascript handlers     button   removeAttr  onclick     and attach our own handlers     button   on  click   function           Inside those handlers we d get the stored original function calls and their arguments  and call them  As we know any function called by inline javascript are global  we can call them with window functionName  apply this-value  argumentsArray   so     button   on  click   function         var element   this        each    this  data  args           function   fn            if  fn 0  in window  window fn 0   apply element  fn 1                  And inside that click handler we can add anything we want before or after the original functions are called   A working example   x000D   x000D     button   each function i  el    x000D      var funcs       x000D   x000D     el  attr  onclick   split      map function item    x000D       var fn       item split      shift    x000D           params   item match                  x000D              args  x000D               x000D          if  params  amp  amp  params length    x000D           args   params 1  split       x000D              if  args  amp  amp  args length    x000D                  args   args map function par    x000D                return par trim   replace       g      x000D                   x000D                x000D            x000D          funcs push  fn  args        x000D          x000D        el  data  args   funcs   x000D     removeAttr  onclick   on  click   function     x000D   console log  click handler for       this id   x000D     x000D   var element   this  x000D     each    this  data  args           function   fn    x000D       if  fn 0  in window  window fn 0   apply element  fn 1    x000D          x000D     x000D      console log  after function call --------    x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt button onclick  doSomething  param     id  id button1  gt action1 lt  button gt  x000D   lt button onclick  doAnotherSomething  param1    param2    id  id button2  gt action2 lt  button gt   x000D   lt button onclick  doDifferentThing    id  id button3  gt action3 lt  button gt  x000D   x000D   lt script gt  x000D   function doSomething arg    console log  doSomething   arg    x000D      function doAnotherSomething arg1  arg2    console log  doAnotherSomething   arg1  arg2    x000D      function doDifferentThing     console log  doDifferentThing   no arguments     x000D   lt  script gt  x000D   x000D   x000D

[javascript] how to get javaScript event source element?

Examples related to javascript

Examples related to jquery

Examples related to html