Quelles propriétés puis-je utiliser avec event.target ?

Question

Je dois identifier les éléments à partir desquels les événements sont déclenchés.

Utilisation event.target obtient l'élément correspondant.

Quelles propriétés puis-je utiliser à partir de là ?

• href
• id
• Nom du nœud

Je n'ai pas trouvé beaucoup d'informations à ce sujet, même sur le site Internet de l'Union européenne. jQuery Nous espérons donc que quelqu'un pourra compléter la liste ci-dessus.

EDIT :

Ceux-ci peuvent s'avérer utiles : propriétés du nœud selfHTML y selfHTML Propriétés HTML

Answer 1

Si vous inspectiez le event.target avec firebug ou les outils de développement de chrome, vous verrez que pour un élément span (par exemple les propriétés suivantes), il aura toutes les propriétés que n'importe quel élément a. Cela dépend de l'élément cible :

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 2

event.target renvoie l'élément du DOM, vous pouvez donc récupérer n'importe quelle propriété/attribut qui a une valeur ; ainsi, pour répondre plus précisément à votre question, vous serez toujours en mesure de récupérer nodeName et vous pouvez récupérer href y id à condition que l'élément a a href y id défini ; sinon undefined sera renvoyée.

Cependant, à l'intérieur d'un gestionnaire d'événements, vous pouvez utiliser this qui est également défini sur l'élément DOM, ce qui est beaucoup plus facile.

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

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 
}  

tirer parti de l'utilisation des propriétés du filtre

---

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 renvoie le nœud ciblé par la fonction. Cela signifie que vous pouvez faire tout ce que vous voulez avec n'importe quel autre noeud comme celui que vous obtiendriez avec la fonction document.getElementById

J'ai essayé avec jQuery

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

Renvoyer une erreur :

.attr not function

Mais _target.attributes.href.value a fonctionné.

Answer 5

event.target renvoie le nœud ciblé par la fonction. Cela signifie que vous pouvez faire tout ce que vous feriez avec n'importe quel autre noeud, comme celui que vous obtiendriez à partir de document.getElementById