Какие свойства я могу использовать с 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()`

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


1

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

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


Стоит отметить, что эта панель теперь устарела и заменена console.dir. В Chrome 85
ivanji

0
//Do it like---
function dragStart(this_,event) {
    var row=$(this_).attr('whatever');
    event.dataTransfer.setData("Text", row);
}

3
На этот вопрос был дан ответ, и за эти ответы размещено много положительных отзывов. В чем ваш ответ лучше? Не могли бы вы объяснить свое решение?
Качественный катализатор
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.