Apa perbedaan antara Event.target, Event.toElement, dan Event.srcElement?

88

Saya memiliki kode berikut:

document.oncontextmenu = function(evt) {
    evt = evt || window.event;
    console.log(evt.target, evt.toElement, evt.srcElement);
};

Dengan mengklik tombol kanan mouse pada a <div class="foo"></div>, kembalikan ini:

div.foo, div.foo, div.foo

Dengan mengklik tombol kanan mouse pada a <input>, kembalikan ini:

masukan, masukan, masukan

Semua sepertinya membawa hasil yang sama. Apakah ada situasi di mana salah satu dari mereka memiliki kegunaan yang berbeda dari yang lain?

Guilherme Nascimento
sumber

Jawaban:

80

The Target acara adalah unsur yang acara ini dikirim:

Objek yang menjadi target peristiwa menggunakan aliran peristiwa DOM . Target acara adalah nilai Event.target atribut.

srcElementadalah cara non-standar IE untuk mendapatkan file target.

The Target acara saat adalah elemen yang memiliki pendengar acara yang saat ini dipanggil:

Dalam aliran peristiwa, target peristiwa saat ini adalah objek yang terkait dengan pengendali peristiwa yang saat ini sedang dikirim. Objek ini MUNGKIN menjadi target acara itu sendiri atau salah satu leluhurnya. Target peristiwa saat ini berubah saat peristiwa menyebar dari satu objek ke objek lain melalui berbagai fase aliran acara. Target acara saat ini adalah nilai Event.currentTargetatribut.

Menggunakan thisdi dalam event listener adalah cara umum (dan standar) untuk mendapatkan target acara saat ini.

Beberapa acara sejenis memiliki relatedTarget:

Digunakan untuk mengidentifikasi peristiwa sekunder yang EventTargetterkait dengan peristiwa UI, bergantung pada jenis peristiwa.

fromElementdan toElementmerupakan cara non-standar IE untuk mendapatkan file relatedTarget.

Oriol
sumber
7
Saya menggunakan "toElement" di Chrome versi 60 - apakah Anda yakin ini adalah "cara IE non-standar"?
PandaWood
2
MSDN mengatakan itu "non-standar 'dan" jangan gunakan di situs produksi yang menghadap web ": developer.mozilla.org/en-US/docs/Web/API/Event/srcElement
TetraDev
chrome terbaru mendukung "toElement" tetapi tidak mendukung Mozilla Firefox. Saya harus menggunakan properti 'target' untuk mendukung beberapa kasus di Mozilla.
Vishal