Best IT Recipes

How to pass the identifier of the element that fires the onclick event for the event function

How to pass the identifier of the element that fires the onclick event for the event handling function.

I am doing something like this -

 <link onclick="doWithThisElement(id_of_this_element)" />
+46
javascript html
Jul 04 2018-11-11T00:
source share
6 answers

Instead of passing an identifier, you can simply pass the element itself:

 <link onclick="doWithThisElement(this)" />

Or, if you insist on passing an identifier:

 <link id="foo" onclick="doWithThisElement(this.id)" />

Here's the JSFiddle Demo: http://jsfiddle.net/dRkuv/

+96
Jul 04 2018-11-11T00:
source share

The element that triggered the event may be different from the one you associated the handler with, because the events create a bubble in the DOM tree .

So, if you want to get the identifier of the element to which the event handler is attached, you can do this easily with this.id ( this refers to the element).

But if you want to get the element in which the event occurred, you need to access it using event.target in browsers compatible with W3C, and event.srcElement in IE 8 and below.

I would not write a lot of JavaScript in the onXXXX HTML attributes. I would only pass the event object and put the code to retrieve the element in the handler (or in an additional function):

 <div onlick="doWithThisElement(event)">

Then the handler will look like this:

 function doWithThisElement(event) { event = event || window.event; // IE var target = event.target || event.srcElement; // IE var id = target.id; //... }

I suggest reading great articles on event handling at quirksmode.org .



Btw

 <link onclick="doWithThisElement(id_of_this_element)" />

hardly makes sense ( <link> is an element that can only appear in <head> , binding an event handler (if at all possible) will have no effect).

+16
Jul 04 2018-11-11T00:
source share

Here's a non-standard , but cross-browser method that can be useful if you don't want to pass any arguments: -

Html:

 <div onclick=myHandler() id="my element id">&rarr; Click Here! &larr;</div>

Script:

 function myHandler(){ alert(myHandler.caller.arguments[0].target.id) }

Demo: http://codepen.io/mrmoje/pen/ouJtk

+7
Jan 29 '14 at 3:40
source share

I would suggest using jquery mate.

With jQuery you can get the identifier of this element

$ (this) .attr ('ID');

without jquery, if I remember correctly, we used to access id with

this.id

Hope that helps :)

+3
Jul 04 '11 at 19:08
source share

Use this:

 <link onclick='doWithThisElement(this.attributes["id"].value)' />

In the context of onclick JavaScript, this refers to the current element (which in this case is the whole HTML link element).

+2
Jul 04 2018-11-11T00:
source share
 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> <script type="text/javascript" src="jquery-2.1.0.js"></script> <script type="text/javascript" > function openOnImageClick(event) { //alert("Jai Sh Raam"); // document.getElementById("images").src = "fruits.jpg"; var target = event.target || event.srcElement; // IE console.log(target); console.log(target.id); var img = document.createElement('img'); img.setAttribute('src', target.src); img.setAttribute('width', '200'); img.setAttribute('height', '150'); document.getElementById("images").appendChild(img); } </script> </head> <body> <h1>Screen Shot View</h1> <p>Click the Tiger to display the Image</p> <div id="images" > </div> <img id="muID1" src="tiger.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick(event)" /> <img id="myID2" src="sabaLogo1.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick(event)" /> </body> </html>
0
Feb 15 '14 at 12:47
source share


More articles:


All Articles