What properties can I use with event.target?

Question

I need to identify elements from which events are fired.

Using event.target gets the respective element.

What properties can I use from there?

href
id
nodeName

I cannot find a whole lot of info on it, even on the jQuery pages, so here is to hoping someone can complete the above list.

EDIT:

These may be helpful: selfHTML node properties and selfHTML HTML properties

score 193 · Answer 1 · edited Jul 30 '19 at 10:21

If you were to inspect the event.target with firebug or chrome's developer tools you would see for a span element (e.g. the following properties) it will have whatever properties any element has. It depends what the target element is:

event.target: HTMLSpanElement

attributes: NamedNodeMap
baseURI: "file:///C:/Test.html"
childElementCount: 0
childNodes: NodeList[1]
children: HTMLCollection[0]
classList: DOMTokenList
className: ""
clientHeight: 36
clientLeft: 1
clientTop: 1
clientWidth: 1443
contentEditable: "inherit"
dataset: DOMStringMap
dir: ""
draggable: false
firstChild: Text
firstElementChild: null
hidden: false
id: ""
innerHTML: "click"
innerText: "click"
isContentEditable: false
lang: ""
lastChild: Text
lastElementChild: null
localName: "span"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: null
nextSibling: null
nodeName: "SPAN"
nodeType: 1
nodeValue: null
offsetHeight: 38
offsetLeft: 26
offsetParent: HTMLBodyElement
offsetTop: 62
offsetWidth: 1445
onabort: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onblur: null
onchange: null
onclick: null
oncontextmenu: null
oncopy: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
onerror: null
onfocus: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onmousedown: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpaste: null
onreset: null
onscroll: null
onsearch: null
onselect: null
onselectstart: null
onsubmit: null
onwebkitfullscreenchange: null
outerHTML: "<span>click</span>"
outerText: "click"
ownerDocument: HTMLDocument
parentElement: HTMLElement
parentNode: HTMLElement
prefix: null
previousElementSibling: null
previousSibling: null
scrollHeight: 36
scrollLeft: 0
scrollTop: 0
scrollWidth: 1443
spellcheck: true
style: CSSStyleDeclaration
tabIndex: -1
tagName: "SPAN"
textContent: "click"
title: ""
webkitdropzone: ""
__proto__: HTMLSpanElement

As far as I'm aware chrome no longer prints DOM elements out like this when using console.log. You have to use console.dir instead. — Astridax, Nov 04 '14 at 16:59
on my button I have a `data-action="ThisValue"`, how can I get the value? — AnonymousUser, Aug 31 '22 at 05:41
@AnonymousUser try `e.target.dataset` https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset — agm1984, Nov 09 '22 at 21:59
@agm1984 I found the solution here: https://stackoverflow.com/a/33645135/15188026 — AnonymousUser, Nov 10 '22 at 05:19

score 51 · Accepted Answer · answered Oct 11 '11 at 08:25

51

event.target returns the DOM element, so you can retrieve any property/ attribute that has a value; so, to answer your question more specifically, you will always be able to retrieve nodeName, and you can retrieve href and id, provided the element has a href and id defined; otherwise undefined will be returned.

However, inside an event handler, you can use this, which is set to the DOM element as well; much easier.

$('foo').bind('click', function () {
    // inside here, `this` will refer to the foo that was clicked
});

answered Oct 11 '11 at 08:25

Matt

74,352
26
153
180

ah. thanks! I'm putting up to links, which show the available properties. – frequent Oct 11 '11 at 08:35
2

will "this" refer to "foo" or "event.target"? If I'm listening to scrollStart on document and scrollStart is triggered on a H1 element, how can I grab H1? – frequent Oct 11 '11 at 08:43
@frequent - Richards answer below shows that you could find H1 by looking at event.target.tagName – Frazer Kirkman Oct 29 '16 at 11:44

score 26 · Answer 3 · answered Jul 04 '17 at 10:40

26

window.onclick = e => {
    console.dir(e.target);  // use this in chrome
    console.log(e.target);  // use this in firefox - click on tag name to view 
}

take advantage of using filter propeties

e.target.tagName
e.target.className
e.target.style.height  // its not the value applied from the css style sheet, to get that values use `getComputedStyle()`

answered Jul 04 '17 at 10:40

bhv

5,188
3
35
44

2

Name... why in the world nobody other than you tells this simple answer? – karthikeayan Jun 26 '18 at 19:17

score 8 · Answer 4 · edited Jul 03 '19 at 14:02

8

event.target returns the node that was targeted by the function. This means you can do anything you want to do with any other node like one you'd get from document.getElementById

I'm tried with jQuery

var _target = e.target;
console.log(_target.attr('href'));

Return an error :

.attr not function

But _target.attributes.href.value was works.

edited Jul 03 '19 at 14:02

Si8

9,141
22
109
221

answered Nov 11 '15 at 06:08

Trong Nguyen Duy

81
1
1

14

That's because `e.target` is not a jQuery object and `.attr()` is jQuery's method. If you were to try `__target.getAttribute('href');` it would work just fine. – kano Oct 27 '16 at 08:33
I got **crbug/1173575, non-JS module files deprecated.** – AnonymousUser Aug 31 '22 at 05:43
I had an error when doing like this: `myTarget.attributes.data-value1.value`. I got it to work, since I used a dash I had to do like this `myTarget.attributes["data-value1"].value`. – AnonymousUser Aug 31 '22 at 05:46
1

@kano had a shorter solution, so for me: `myTarget.getAttribute("data-value1")`. – AnonymousUser Aug 31 '22 at 05:48

score 5 · Answer 5 · edited Nov 07 '13 at 04:42

5

event.target returns the node that was targeted by the function. This means you can do anything you would do with any other node like one you'd get from document.getElementById

edited Nov 07 '13 at 04:42

Praveen

55,303
33
133
164

answered Oct 11 '11 at 08:26

Alex

7,320
1
18
31

score 3 · Answer 6 · answered Oct 22 '21 at 11:34

3

If you want to get attribute value

event.target.getAttribute('attribute name')

answered Oct 22 '21 at 11:34

M.Sinan Şahin

307
3
6

score 2 · Answer 7 · answered Oct 02 '18 at 04:58

2

An easy way to see all the properties on a particular DOM node in Chrome (I'm on v.69) is to right click on the element, select inspect, and then instead of viewing the "Style" tab click on "Properties".

Inside of the Properties tab you will see all the properties for your particular element.

answered Oct 02 '18 at 04:58

damdeez

221
2
5

4

worth mentioning that this panel is now deprecated in favour of console.dir. On Chrome 85 – ivanji Sep 21 '20 at 18:25

score 1 · Answer 8 · edited Sep 27 '22 at 17:55

1

If you want to get an attribute value you just need to use:

getAttribute('attributeName')

Example:

e.target.getAttribute('attributeName')

edited Sep 27 '22 at 17:55

Tyler2P

2,324
26
22
31

answered Sep 23 '22 at 19:55

mahdiyeh

11
2

score 0 · Answer 9 · answered Oct 07 '20 at 18:24

0

//Do it like---
function dragStart(this_,event) {
    var row=$(this_).attr('whatever');
    event.dataTransfer.setData("Text", row);
}

answered Oct 07 '20 at 18:24

abhishek92

61
4

3

This question has been answered and many upvotes are placed for these answers. In which way is your answer better? Would you please explain your solution? – Quality Catalyst Oct 08 '20 at 03:10

What properties can I use with event.target?

9 Answers9

Linked