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

Answer 1

How to list all properties from any object without of using "Developer tools"

Not always we have the possibility to open "Developer tools" on personal computer. Now, in 2024 a lot of developers programs direct on smartphones and on smartphon we do not have "Developer tools" like on PC.

But even on smartphon you can inspect each object and can see all properties from objects.

For this case we can use for in loop:

The for...in statement iterates over all enumerable string properties of an object (ignoring properties keyed by symbols), including inherited enumerable properties.

We can use it like follows:

for(var property in anyObject)
    console.log(property + ': ' + anyObject[property]);

So, for example if you want to see event.target properties then you could do it like follows:

function writeProperties()
{
    var str = '';
    for (var i in event.target)
        str += '<b style="color:green">' + i + '</b>: ' + event.target[i] + '<hr>';
    
    document.querySelector('#output').innerHTML = str;
}

<button onclick="writeProperties()">Write all properties from event.target</button>
<div id="output"></div>

After starting of this snippet above you will see the button and after clicking of the button you will see all properties from this button object because in event.target will be this button object.

But instead of event.target you could take even window or document objects and ispect them. You could write your own "Insperter App" in normal JavaScript without of using from "Developer tools". Try it!

Answer 2

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

getAttribute('attributeName')

Example:

e.target.getAttribute('attributeName')

Answer 3

If you want to get attribute value

event.target.getAttribute('attribute name')

Answer 4

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

Answer 5

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

Answer 6

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.

Answer 7

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.

Answer 8

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()`

Answer 9

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

Answer 10

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
});