Preciso identificar os elementos a partir dos quais os eventos são disparados.
Usando event.target
obté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
fonte
Se você inspecionar o
event.target
com 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
fonte
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 }
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()`
fonte
event.target
retorna 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:
Mas
_target.attributes.href.value
foi funciona.fonte
e.target
não é um objeto jQuery e.attr()
é o método jQuery. Se você tentasse__target.getAttribute('href');
, funcionaria muito bem.event.target
retorna 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
fonte
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.
fonte
//Do it like--- function dragStart(this_,event) { var row=$(this_).attr('whatever'); event.dataTransfer.setData("Text", row); }
fonte