What properties can I use with event.target?

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

8 Answers

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: "" 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 

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

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

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.

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

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.

If you want to get attribute value

event.target.getAttribute('attribute name') 

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