Welche Eigenschaften kann ich mit event.target verwenden?

90

Ich muss Elemente identifizieren, von denen Ereignisse ausgelöst werden.

Mit event.targetwird das jeweilige Element abgerufen.

Welche Eigenschaften kann ich von dort aus nutzen?

  • href
  • Ich würde
  • Knotenname

Ich kann nicht viele Informationen dazu finden, auch nicht auf den jQuery- Seiten. Ich hoffe, dass jemand die obige Liste vervollständigen kann.

BEARBEITEN:

Diese können hilfreich sein: selfHTML-Knoteneigenschaften und selfHTML-HTML-Eigenschaften

häufig
quelle

Antworten:

41

event.targetGibt das DOM-Element zurück, sodass Sie jede Eigenschaft / jedes Attribut mit einem Wert abrufen können. so, Ihre Frage genauer zu beantworten, werden Sie immer in der Lage sein , abrufen nodeName, und Sie können abrufen hrefund id, sofern das Element hat ein hrefund iddefiniert; Andernfalls undefinedwird zurückgegeben.

Innerhalb eines Ereignishandlers können Sie jedoch Folgendes verwenden this, das ebenfalls auf das DOM-Element festgelegt ist. viel einfacher.

$('foo').bind('click', function () {
    // inside here, `this` will refer to the foo that was clicked
});
Matt
quelle
Ah. Vielen Dank! Ich stelle Links auf, die die verfügbaren Eigenschaften anzeigen.
häufig
2
Wird sich "this" auf "foo" oder "event.target" beziehen? Wie kann ich H1 greifen, wenn ich scrollStart für ein Dokument höre und scrollStart für ein H1-Element ausgelöst wird?
häufig
@frequent - Richards Antwort unten zeigt, dass Sie H1 finden können, indem Sie event.target.tagName
Frazer Kirkman
140

Wenn Sie das event.targetmit Firebug- oder Chrome-Entwicklertools untersuchen, sehen Sie, dass ein span-Element (z. B. die folgenden Eigenschaften) alle Eigenschaften eines Elements aufweist. Es kommt darauf an, was das Zielelement ist:

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
Richard
quelle
21
Soweit mir bekannt ist, druckt Chrome DOM-Elemente bei Verwendung von console.log nicht mehr so ​​aus. Sie müssen stattdessen console.dir verwenden.
Astridax
Ja, es ist nicht so schlimm!
18
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 
}  

Geben Sie hier die Bildbeschreibung ein

Nutzen Sie die Verwendung von Filter-Eigenschaften


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()`
bhv
quelle
1
<attribute> Name ... warum in aller Welt sagt niemand anders als Sie diese einfache Antwort?
karthikeayan
7

event.targetGibt den Knoten zurück, auf den die Funktion abzielte. Dies bedeutet, dass Sie mit jedem anderen Knoten, von dem Sie ihn erhalten möchten, alles tun können, was Sie möchtendocument.getElementById

Ich habe es mit jQuery versucht

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

Geben Sie einen Fehler zurück:

.attr funktioniert nicht

Aber _target.attributes.href.valuewar Werke.

Trong Nguyen Duy
quelle
10
Dies liegt daran, dass e.targetes sich nicht um ein jQuery-Objekt handelt und .attr()es sich um die Methode von jQuery handelt. Wenn Sie es versuchen __target.getAttribute('href');würden, würde es gut funktionieren.
Kano
2

event.targetGibt den Knoten zurück, auf den die Funktion abzielte. Dies bedeutet, dass Sie alles tun können, was Sie mit einem anderen Knoten tun würden, wie dem, von dem Sie ihn erhalten würdendocument.getElementById

Alex
quelle
1

Eine einfache Möglichkeit, alle Eigenschaften eines bestimmten DOM-Knotens in Chrome anzuzeigen (ich bin in Version 69), besteht darin, mit der rechten Maustaste auf das Element zu klicken, "Inspizieren" auszuwählen und dann anstelle der Registerkarte "Stil" auf "Eigenschaften" zu klicken. .

Auf der Registerkarte Eigenschaften sehen Sie alle Eigenschaften für Ihr bestimmtes Element.

damdeez
quelle
Erwähnenswert ist, dass dieses Panel jetzt zugunsten von console.dir veraltet ist. Auf Chrome 85
ivanji
0
//Do it like---
function dragStart(this_,event) {
    var row=$(this_).attr('whatever');
    event.dataTransfer.setData("Text", row);
}
abhishek92
quelle
3
Diese Frage wurde beantwortet und es werden viele positive Stimmen für diese Antworten abgegeben. Inwiefern ist Ihre Antwort besser? Würden Sie bitte Ihre Lösung erklären?
Qualitätskatalysator