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


Muszę zdefiniować elementy, z których uruchamiane są zdarzenia.
Użycie
event.target
powoduje pobranie odpowiedniego elementu.
Z jakich właściwości mogę korzystać stamtąd?
  • href
  • identyfikator
  • nodeName

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

EDIT

:
Może to być pomocne:

Właściwości węzła selfHTML
http://de.selfhtml.org/javascript/objekte/node.htm
i

Właściwości selfHTML HTML
http://de.selfhtml.org/javascr ... aften
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Gdybyś sprawdził
event.target
za pomocą firebug lub narzędzi deweloperskich chrome, zobaczyłbyś, że element span (taki jak poniższe właściwości) będzie miał takie same właściwości, jakie posiada każdy element. To zależy od tego, jaki jest cel:
event.target: HTMLSpanElementattributes: 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: "[url=http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml"[/url]
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
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

event.target
zwraca element DOM, więc możesz pobrać dowolną właściwość/atrybut, który ma wartość; aby dokładniej odpowiedzieć na Twoje pytanie, zawsze możesz uzyskać
nodeName
oraz
href
i
id
, pod warunkiem, że ten element

To ma

zdefiniowane
href
i
id
; w przeciwnym razie zostanie zwrócony
undefined
.
Jednak wewnątrz modułu obsługi zdarzeń można użyć elementu
this
, które również jest ustawione na element DOM; dużo łatwiej.
$('foo').bind('click', function () {
// inside here, `this` will refer to the foo that was clicked
});
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

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
}

https://i.stack.imgur.com/V8p6O.png
skorzystać z właściwości filtrowania
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()`
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

event.target
zwraca węzeł, na który kierowana była funkcja. Oznacza to, że możesz robić, co chcesz, z dowolnym innym węzłem, takim jak ten, który otrzymasz z
document.getElementById
Próbowałem z jQuery
var _target = e.target;
console.log(_target.attr('href'));

Zwraca błąd:
.attr nie działa

Ale
_target.attributes.href.value
działało.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

event.target

zwraca węzeł, który był celem funkcji. Oznacza to, że możesz zrobić wszystko, co zrobiłbyś z każdym innym węzłem, na przykład tym, który otrzymałeś z
document.getElementById
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Łatwym sposobem na wyświetlenie wszystkich właściwości konkretnego węzła DOM w przeglądarce Chrome (jestem na wersji 69) jest kliknięcie elementu prawym przyciskiem myszy, wybranie opcji Sprawdź, a następnie zamiast przeglądania karty Styl kliknij opcję Właściwości.
Na karcie właściwości zobaczysz wszystkie właściwości konkretnego przedmiotu.

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się