Properti apa yang dapat saya gunakan dengan event.target?

90

Saya perlu mengidentifikasi elemen dari mana peristiwa dipecat.

Menggunakan event.targetmendapatkan elemen masing-masing.

Properti apa yang dapat saya gunakan dari sana?

  • href
  • Indo
  • nodeName

Saya tidak dapat menemukan banyak info tentangnya, bahkan di halaman jQuery , jadi di sini saya berharap seseorang dapat menyelesaikan daftar di atas.

EDIT:

Ini mungkin berguna: properti node selfHTML dan properti HTML selfHTML

sering
sumber

Jawaban:

41

event.targetmengembalikan elemen DOM, sehingga Anda bisa mengambil properti / atribut apa pun yang memiliki nilai; jadi, untuk menjawab pertanyaan Anda lebih khusus, Anda akan selalu dapat mengambil nodeName, dan Anda dapat mengambil hrefdan id, disediakan elemen memiliki sebuah hrefdan iddidefinisikan; jika tidak undefinedakan dikembalikan.

Namun, di dalam event handler, Anda bisa menggunakan this, yang juga disetel ke elemen DOM; jauh lebih mudah.

$('foo').bind('click', function () {
    // inside here, `this` will refer to the foo that was clicked
});
Matt
sumber
ah. Terima kasih! Saya memasang tautan, yang menunjukkan properti yang tersedia.
Sering
2
akankah "ini" merujuk ke "foo" atau "event.target"? Jika saya mendengarkan scrollStart pada dokumen dan scrollStart dipicu pada elemen H1, bagaimana saya dapat mengambil H1?
Sering
@frequent - Jawaban Richards di bawah ini menunjukkan bahwa Anda dapat menemukan H1 dengan melihat event.target.tagName
Frazer Kirkman
141

Jika Anda memeriksa event.targetdengan firebug atau alat pengembang chrome, Anda akan melihat elemen span (misalnya properti berikut) itu akan memiliki properti apa pun yang dimiliki elemen. Itu tergantung apa elemen targetnya:

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
sumber
21
Sejauh yang saya tahu, chrome tidak lagi mencetak elemen DOM seperti ini saat menggunakan console.log. Anda harus menggunakan console.dir sebagai gantinya.
Astridax
ya, tidak terlalu buruk!
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 
}  

masukkan deskripsi gambar di sini

manfaatkan penggunaan properti filter


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
sumber
1
<atribut> Nama ... mengapa tidak ada orang lain selain Anda yang memberi tahu jawaban sederhana ini?
karthikeayan
7

event.targetmengembalikan node yang ditargetkan oleh fungsi tersebut. Ini berarti Anda dapat melakukan apa pun yang ingin Anda lakukan dengan node lain seperti yang Anda dapatkandocument.getElementById

Saya mencoba dengan jQuery

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

Kembalikan kesalahan:

.attr tidak berfungsi

Tapi _target.attributes.href.valueberhasil.

Trong Nguyen Duy
sumber
10
Itu karena e.targetbukan objek jQuery dan .attr()metode jQuery. Jika Anda mencobanya, __target.getAttribute('href');itu akan bekerja dengan baik.
kano
2

event.targetmengembalikan node yang ditargetkan oleh fungsi tersebut. Ini berarti Anda dapat melakukan apa pun yang akan Anda lakukan dengan node lain seperti yang Anda dapatkandocument.getElementById

Alex
sumber
1

Cara mudah untuk melihat semua properti pada simpul DOM tertentu di Chrome (saya menggunakan v.69) adalah dengan mengklik kanan pada elemen, pilih inspeksi, dan daripada melihat tab "Gaya", klik "Properti" .

Di dalam tab Properties Anda akan melihat semua properti untuk elemen tertentu Anda.

Sialan
sumber
perlu disebutkan bahwa panel ini sekarang sudah usang dan mendukung console.dir. Di Chrome 85
ivanji
0
//Do it like---
function dragStart(this_,event) {
    var row=$(this_).attr('whatever');
    event.dataTransfer.setData("Text", row);
}
abhishek92.dll
sumber
3
Pertanyaan ini telah dijawab dan banyak suara positif ditempatkan untuk jawaban ini. Dalam hal mana jawaban Anda lebih baik? Bisakah Anda menjelaskan solusi Anda?
Katalis Kualitas