Quali proprietà posso usare con event.target?

Question

Ho bisogno di identificare gli elementi da cui vengono lanciati gli eventi.

L'utilizzo di event.target ottiene il rispettivo elemento.

Quali proprietà posso utilizzare da lì?

• href
• id
• nomeNodo

non riesco a trovare un sacco di informazioni su di esso, anche sulle jQuery pagine, ecco a sperando che qualcuno possa completare l'elenco di cui sopra.

EDIT:

Questi possono essere utili: selfHTML node properties e selfHTML HTML properties

Answer 1

event.target restituisce l'elemento DOM, in modo da poter recuperare qualsiasi proprietà/attributo che ha un valore; Quindi, per rispondere alla tua domanda più specificamente, sarete sempre in grado di recuperare nodeName, ed è possibile recuperare href e id, a condizione che l'elemento ha un href e id definito; altrimenti verrà restituito undefined.

Tuttavia, all'interno di un gestore di eventi, è possibile utilizzare this, che è impostato anche sull'elemento DOM; molto più facile.

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

Answer 2

event.target restituisce il nodo che è stato preso di mira dalla funzione. Ciò significa che puoi fare qualsiasi cosa tu voglia fare con qualsiasi altro nodo come quello che riceverai da document.getElementById

Answer 3

Se dovessi ispezionare l'event.target con firebug o gli strumenti di sviluppo di Chrome, vedresti un elemento span (ad esempio le seguenti proprietà) avrà le proprietà di qualsiasi elemento. dipende da cosa l'elemento di destinazione è:

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 4

event.target restituisce il nodo che è stato preso di mira dalla funzione. Questo significa che si può fare tutto quello che vuoi a che fare con qualsiasi altro nodo, come quella che si otterrebbe da document.getElementById

sto provato con jQuery

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

restituirà un errore:

. attr non funziona

Ma il _target.attributes.href.value era un lavoro.

Answer 5

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 
} 

prendere vantaggio di utilizzare filtri 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()`