web-dev-qa-db-fra.com

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

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

En utilisant event.target obtient l'élément correspondant.

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

  • href
  • identifiant
  • nodeName

Je ne trouve pas beaucoup d’informations à ce sujet, même sur les pages jQuery . Nous espérons donc que quelqu'un pourra compléter la liste ci-dessus.

EDIT:

Ceux-ci peuvent être utiles: propriétés du noeud selfHTML et propriétés du HTML selfHTML

eventspropertiesjquery
69
frequent

event.target renvoie l'élément DOM, vous pouvez donc extraire toute propriété/attribut ayant une valeur; donc, pour répondre plus précisément à votre question, vous pourrez toujours récupérer nodeName, et vous pourrez récupérer href et id, à condition que l'élément a a href et id définis; sinon undefined sera 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
});
37
Matt

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

enter image description here

profiter de l'utilisation de propriétés de filtrage

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()`
15
bhv

event.target renvoie le noeud 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 obtiendrez de document.getElementById

J'ai essayé avec jQuery

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

Renvoyer une erreur:

.attr pas fonctionner

Mais _target.attributes.href.value était des travaux.

5
Trong Nguyen Duy

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 nœud, comme celui que vous obtiendrez de document.getElementById

2
Alex

Un moyen facile de voir toutes les propriétés d’un nœud DOM particulier dans Chrome (je suis sur la version 69)] consiste à cliquer avec le bouton droit de la souris sur l’élément, à sélectionner inspecter, puis au lieu de 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.

1
damdeez