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

J'ai besoin d'identifier les éléments à partir desquels les événements sont déclenchés.

Using event.targetobtient l'élément respectif.

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

• href
• id
• nodeName

Je ne trouve pas beaucoup d'informations dessus, même sur les pages jQuery , alors j'espère que quelqu'un pourra compléter la liste ci-dessus.

ÉDITER:

Ceux-ci peuvent être utiles: propriétés de nœud selfHTML et propriétés HTML selfHTML

event.targetrenvoie l'élément DOM, afin que vous puissiez récupérer n'importe quelle propriété / attribut qui a une valeur; Ainsi, pour répondre plus précisément à votre question, vous pourrez toujours récupérer nodeName, et vous pourrez récupérer hrefet id, à condition que l'élément ait un hrefet iddéfini; sinon undefinedsera retourné.

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

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

Si vous deviez inspecter les event.targetoutils de développement avec firebug ou chrome, vous verriez pour un élément span (par exemple les propriétés suivantes), il aura toutes les propriétés de chaque élément. 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

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 
}  

profiter de l'utilisation de filtres

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

J'ai essayé avec jQuery

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

Renvoyer une erreur:

.attr ne fonctionne pas

Mais _target.attributes.href.valuec'était des œuvres.

event.targetrenvoie le nœud ciblé par la fonction. Cela signifie que vous pouvez faire tout ce que vous feriez avec n'importe quel autre nœud comme celui que vous obtiendriezdocument.getElementById

Un moyen simple de voir toutes les propriétés d'un nœud DOM particulier dans Chrome (je suis sur la v.69) est de faire un clic droit sur l'élément, sélectionnez inspecter, puis au lieu d'afficher l'onglet "Style", cliquez sur "Propriétés" .

À l'intérieur de l'onglet Propriétés, vous verrez toutes les propriétés de votre élément particulier.

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