How to get the onclick calling object

Question

I need to have a handler on the calling object of onclick event   lt a href  quot 123 com quot  onclick  quot click123 event   quot  gt link lt  a gt    lt script gt    function click123 event          i need  lt a gt  so i can manipulate it with Jquery      lt  script gt   I want to do this without the use of     click or     live of jQuery but with the method described above

User · Answer

I think the best way is to use currentTarget property instead of target property.

The currentTarget read-only property of the Event interface identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to Event.target, which identifies the element on which the event occurred.

For example:

<a href="#"><span class="icon"></span> blah blah</a>

Javascript:

a.addEventListener('click', e => {
    e.currentTarget; // always returns "a" element
    e.target; // may return "a" or "span"
})

User · Answer

The thing with your method is that you clutter your HTML with javascript  If you put your javascript in an external file you can access your HTML unobtrusive and this is much neater   Lateron you can expand your code with addEventListener attackEvent IE  to prevent memory leaks   This is without jQuery   lt a href  123 com  id  elementid  gt link lt  a gt   window onload   function        var el   document getElementById  elementid      el onclick   function  e        var ev   e    window event         here u can use this or el as the HTML node         You say you want to manipulate it with jQuery  So you can use jQuery  Than it is even better to do it like this      this is the window onload startup of your JS as in my previous example  The difference is     that you can add multiple onload functions   function           a elementid   bind  click   function  e            this  points to the  lt a gt  element         e  points to the event object

User · Answer

The easiest way is to pass this to the click123 function  or you can also do something like this cross-browser    function click123 e     e   e    window event    var src   e target    e srcElement      src element is the eventsource

User · Answer

http   docs jquery com Events jQuery Event  Try with event target     Contains the DOM element that issued   the event  This can be the element   that registered for the event or a   child of it

User · Answer

pass in this in the inline click handler   lt a href  123 com  onclick  click123 this    gt link lt  a gt    or use event target in the function  according to the W3C DOM Level 2 Event model   function click123 event        var a   event target      But of course  IE is different  so the vanilla JavaScript way of handling this is  function doSomething e        var targ      if   e  var e   window event      if  e target  targ   e target      else if  e srcElement  targ   e srcElement      if  targ nodeType    3     defeat Safari bug         targ   targ parentNode      or less verbose  function doSomething e         e   e    window event      var targ   e target    e srcElement    e      if  targ nodeType    3  targ   targ parentNode     defeat Safari bug     where e is the event object that is passed to the function in browsers other than IE   If you re using jQuery though  I would strongly encourage unobtrusive JavaScript and use jQuery to bind event handlers to elements

[javascript] How to get the onclick calling object?

Examples related to javascript

Examples related to jquery

Examples related to html