Какие свойства я могу использовать с event.target?

91

Мне нужно определить элементы, из которых запускаются события.

Использование event.targetполучает соответствующий элемент.

Какие свойства я могу использовать оттуда?

  • href
  • мне бы
  • nodeName

Я не могу найти по нему много информации, даже на страницах jQuery , так что надеюсь, что кто-то сможет заполнить приведенный выше список.

РЕДАКТИРОВАТЬ:

Они могут быть полезны: свойства узла selfHTML и свойства selfHTML HTML

частый
источник

Ответы:

41

event.targetвозвращает элемент DOM, поэтому вы можете получить любое свойство / атрибут, имеющий значение; так, чтобы ответить на ваш вопрос более конкретно, вы всегда будете иметь возможность получить nodeName, и вы можете получить hrefи id, при условии , что элемент имеетhref и idопределен; в противном случае undefinedбудет возвращен.

Однако внутри обработчика событий вы можете использовать this, который также установлен в элемент DOM; намного легче.

$('foo').bind('click', function () {
    // inside here, `this` will refer to the foo that was clicked
});
Мэтт
источник
ах. Благодарность! Я размещаю ссылки, которые показывают доступные свойства.
часто бывает
2
"this" будет относиться к "foo" или "event.target"? Если я слушаю scrollStart в документе, а scrollStart запускается для элемента H1, как я могу захватить H1?
часто бывает
@frequent - Ответ Ричардса ниже показывает, что вы можете найти H1, посмотрев на event.target.tagName
Фрейзер Киркман,
141

Если бы вы event.targetпроверили его с помощью инструментов разработчика firebug или chrome, вы бы увидели элемент span (например, следующие свойства), он будет иметь те свойства, которые есть у любого элемента. Это зависит от целевого элемента:

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
Ричард
источник
21
Насколько мне известно, хром больше не выводит такие элементы DOM при использовании console.log. Вместо этого вы должны использовать console.dir.
Astridax
да, это не так уж плохо!
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 
}  

введите описание изображения здесь

воспользоваться преимуществами фильтров


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
источник
1
<атрибут> Имя ... почему в мире никто кроме вас не говорит этот простой ответ?
karthikeayan
7

event.targetвозвращает узел, на который нацелена функция. Это означает, что вы можете делать все, что хотите, с любым другим узлом, например, с тем, который вы получили бы отdocument.getElementById

Я пробовал с jQuery

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

Вернуть ошибку:

.attr не работает

Но _target.attributes.href.valueбыло работает.

Тронг Нгуен Дуй
источник
10
Это потому, что e.targetэто не объект .attr()jQuery, а метод jQuery. Если бы вы попробовали, __target.getAttribute('href');это сработало бы нормально.
kano
2

event.targetвозвращает узел, на который нацелена функция. Это означает, что вы можете делать все, что вы бы сделали с любым другим узлом, например, с тем, который вы получили бы отdocument.getElementById

Alex
источник
1

Простой способ увидеть все свойства конкретного узла DOM в Chrome (я использую v.69) - это щелкнуть элемент правой кнопкой мыши, выбрать «Проверить», а затем вместо просмотра вкладки «Стиль» нажать «Свойства» .

Внутри вкладки «Свойства» вы увидите все свойства конкретного элемента.

Damdeez
источник
Стоит отметить, что эта панель теперь устарела и заменена console.dir. В Chrome 85
ivanji
0
//Do it like---
function dragStart(this_,event) {
    var row=$(this_).attr('whatever');
    event.dataTransfer.setData("Text", row);
}
abhishek92
источник
3
На этот вопрос был дан ответ, и за эти ответы размещено много положительных отзывов. В чем ваш ответ лучше? Не могли бы вы объяснить свое решение?
Качественный катализатор