What properties can be used with event.target?

Question

I need to identify the elements from which events are fired.

Using event.target gets the corresponding element.

What properties can I use from there?

• href
• id
• NODENAME

I can't find much information about this, even on jQuery pages, so hopefully someone can complete the list.

EDIT:

This can be useful: selfHTML node properties and selfHTML HTML properties

Answer 1

event.target returns a DOM element, so you can get any property / attribute that matters; therefore, to more accurately answer your question, you can always get nodeName , and you can get href and id if the element has href and id ; otherwise returns undefined .

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

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

Answer 2

If you looked at event.target using the Firebug or Chrome developer tools that you would see for the span element (for example, the following properties), it will have any properties that any element has. It depends on 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 3

 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 the filter

---

 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 4

event.target returns the node that the function was aimed at. This means that you can do whatever you want with any other node, like the one you would get from document.getElementById

I tried with jQuery

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

Return error:

.attr does not work

But _target.attributes.href.value was working.

Answer 5

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

Answer 6

An easy way to see all the properties of a specific DOM node in Chrome (I am on v.69) is to right-click on an element, select a check, and then click "Properties" instead of viewing the Style tab.,

Inside the Properties tab, you will see all the properties of your specific item.