Quais propriedades posso usar com event.target?

93

Preciso identificar os elementos a partir dos quais os eventos são disparados.

Usando event.targetobtém o respectivo elemento.

Quais propriedades posso usar a partir daí?

  • href
  • Eu iria
  • nodeName

Não consigo encontrar muitas informações sobre ele, mesmo nas páginas jQuery , então espero que alguém possa completar a lista acima.

EDITAR:

Eles podem ser úteis: propriedades de nó selfHTML e propriedades HTML selfHTML

freqüente
fonte

Respostas:

42

event.targetretorna o elemento DOM, para que você possa recuperar qualquer propriedade / atributo que tenha um valor; portanto, para responder à sua pergunta de forma mais específica, você sempre poderá recuperar nodeName, e poderá recuperar hrefe id, desde que o elemento tenha a hrefe iddefinido; caso contrário undefined, será retornado.

No entanto, dentro de um manipulador de eventos, você pode usar this, que também está definido para o elemento DOM; muito facil.

$('foo').bind('click', function () {
    // inside here, `this` will refer to the foo that was clicked
});
Matt
fonte
ah. obrigado! Estou colocando links, que mostram as propriedades disponíveis.
frequente
2
"this" se referirá a "foo" ou "event.target"? Se estou ouvindo scrollStart no documento e scrollStart é disparado em um elemento H1, como posso pegar H1?
frequente
@frequent - a resposta de Richards abaixo mostra que você pode encontrar H1 olhando para event.target.tagName
Frazer Kirkman
144

Se você inspecionar o event.targetcom firebug ou as ferramentas de desenvolvedor do Chrome, verá um elemento span (por exemplo, as propriedades a seguir), ele terá quaisquer propriedades que qualquer elemento tenha. Depende de qual elemento de destino é:

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
fonte
22
Até onde sei, o chrome não imprime mais elementos DOM assim ao usar console.log. Você tem que usar console.dir em vez disso.
Astridax
sim, não é tão ruim!
20
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 
}  

insira a descrição da imagem aqui

tirar proveito do uso de propriedades de filtro


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
fonte
1
<attribute> Nome ... por que diabos ninguém além de você dá esta resposta simples?
karthikeayan
7

event.targetretorna o nó que foi direcionado pela função. Isso significa que você pode fazer o que quiser com qualquer outro nó como aquele que você obteriadocument.getElementById

Eu tentei com jQuery

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

Retorne um erro:

.attr não funciona

Mas _target.attributes.href.valuefoi funciona.

Trong Nguyen Duy
fonte
10
Isso porque e.targetnão é um objeto jQuery e .attr()é o método jQuery. Se você tentasse __target.getAttribute('href');, funcionaria muito bem.
kano
2

event.targetretorna o nó que foi direcionado pela função. Isso significa que você pode fazer qualquer coisa que faria com qualquer outro nó como aquele que você obteriadocument.getElementById

Alex
fonte
1

Uma maneira fácil de ver todas as propriedades em um nó DOM específico no Chrome (estou na v.69) é clicar com o botão direito no elemento, selecionar inspecionar e, em vez de visualizar a guia "Estilo", clique em "Propriedades" .

Dentro da guia Propriedades, você verá todas as propriedades de seu elemento específico.

Damdeez
fonte
vale a pena mencionar que este painel agora está obsoleto em favor de console.dir. No Chrome 85
ivanji
0
//Do it like---
function dragStart(this_,event) {
    var row=$(this_).attr('whatever');
    event.dataTransfer.setData("Text", row);
}
abhishek92
fonte
3
Esta pergunta foi respondida e muitos votos positivos são colocados para essas respostas. De que forma sua resposta é melhor? Você poderia explicar sua solução?
Quality Catalyst