Búsqueda de sitios web

javascript - ¿Qué propiedades puedo usar con event.target?

Necesito identificar los elementos desde los cuales se disparan los eventos.

Usar event.target obtiene el elemento respectivo.

¿Qué propiedades puedo usar de allí?

  • href
  • id
  • nodeName

No puedo encontrar mucha información al respecto, ni siquiera en las páginas de jQuery, así que aquí esperamos que alguien pueda completar la lista anterior.

EDITAR:

Estos pueden ser útiles: propiedades de nodo de selfHTML y propiedades HTML de selfHTML

Respuesta #1

Si inspeccionaras el event.target con Firebug o las herramientas de desarrollo de Chrome, verías que para un elemento (por ejemplo, las siguientes propiedades) tendrá las propiedades que cualquier elemento posee. Depende de cuál sea el elemento objetivo:

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

Respuesta #2

event.target devuelve el elemento DOM, por lo que puedes recuperar cualquier propiedad/atributo que tenga un valor; así que, para responder tu pregunta más específicamente, siempre podrás recuperar nodeName, y puedes recuperar href y id, siempre que el elemento tenga un href y un id definidos; de lo contrario, se devolverá undefined.

Sin embargo, dentro de un manejador de eventos, puedes usar this, que también está configurado al elemento DOM; mucho más fácil.

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

Respuesta #3

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 
}

aprovechar el uso de propiedades 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()`

Respuesta #4

event.target devuelve el nodo que fue el objetivo de la función. Esto significa que puedes hacer cualquier cosa que quieras con cualquier otro nodo, como uno que obtendrías de document.getElementById

Estoy cansado de jQuery

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

Devolver un error :

.attr no es una función

Pero _target.attributes.href.value funcionaba.

Artículos relacionados