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

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

<a href="123.com" id="elementid">link</a>

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 <a> 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

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

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

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    lt a href     gt  lt span class  icon  gt  lt  span gt  blah blah lt  a gt    Javascript   a addEventListener  click   e   gt        e currentTarget     always returns  a  element     e target     may return  a  or  span

[javascript] How to get the onclick calling object?

Examples related to javascript

Examples related to jquery

Examples related to html