Jakich właściwości mogę używać z event.target?

Muszę zidentyfikować elementy, z których uruchamiane są zdarzenia.

Użycie event.targetpobiera odpowiedni element.

Z jakich właściwości mogę korzystać stamtąd?

• href
• ID
• nodeName

Nie mogę znaleźć na ten temat wielu informacji, nawet na stronach jQuery , więc mam nadzieję, że ktoś uzupełni powyższą listę.

EDYTOWAĆ:

Przydatne mogą być: właściwości węzła selfHTML i właściwości HTML selfHTML

event.targetzwraca element DOM, więc możesz pobrać dowolną właściwość / atrybut, który ma wartość; tak, aby odpowiedzieć na to pytanie bardziej szczegółowo, to zawsze będzie w stanie odzyskać nodeName, można odzyskać hrefi idpod warunkiem, że element mahref i idokreślone; w przeciwnym razie undefinedzostaną zwrócone.

Jednak wewnątrz procedury obsługi zdarzeń można użyć this, która jest również ustawiona na element DOM; dużo łatwiej.

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

Gdybyś miał sprawdzić za event.targetpomocą firebug lub narzędzi deweloperskich chrome, zobaczysz element span (np. Poniższe właściwości), będzie on miał takie same właściwości, jakie posiada każdy element. To zależy, jaki jest element docelowy:

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 
}  

skorzystaj z właściwości filtrów

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.targetzwraca węzeł, który był celem funkcji. Oznacza to, że możesz zrobić wszystko, co chcesz, z dowolnym innym węzłem, takim jak ten, z którego otrzymaszdocument.getElementById

Próbowałem z jQuery

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

Zwróć błąd:

.attr nie działa

Ale _target.attributes.href.valueto działa.

event.targetzwraca węzeł, który był celem funkcji. Oznacza to, że możesz zrobić wszystko, co zrobiłbyś z każdym innym węzłem, takim jak ten, z którego dostanieszdocument.getElementById

Łatwym sposobem na wyświetlenie wszystkich właściwości określonego węzła DOM w Chrome (jestem na wersji 69) jest kliknięcie elementu prawym przyciskiem myszy, wybranie opcji „Sprawdź”, a następnie zamiast przeglądania karty „Styl” kliknij „Właściwości” .

Na karcie Właściwości zobaczysz wszystkie właściwości konkretnego elementu.

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