Событие возникает, когда вы наводите указатель мыши на элемент, далее оно начинает подниматься и обрабатывается уже в элементе document. У Вас есть элемент, с которого все началось (event.target) и элемент, который в данный момент обрабатывает событие (event.currentTarget он же document) во время всплытия.
Проблема в том, что вы не можете навести указатель мыши на элемент <a>
, поскольку он невидимый и на странице никак не отображается. Достаточно добавить хотя бы рамку и все станет на место. Элемент становится видимым и отображаемым на странице и событие получит ход.
Update
@disfated, вы по моему сами путаетесь, что и откуда у Вас в коде возникает и потому не понимаете, что я Вам написал. Событие mouseover возникает когда Вы наводите мышь на элемент и далее оно всплывает по всем элементам.
Где у Вас стоит обработчик в коде? Он у Вас стоит на элементе document исходя из этой строки: document.addEventListener( ...
. Событие возникло и всплыло по всем элементам до document, который его и обработал. Можно это узнать через event.currentTarget(выведет тот самый #document). Именно он это событие поймал и именно для него Вы указали функцию обработчик.
Кто был инициатором события? Элемент, над которым вы провели мышкой. Вы проводите мышкой над элементом img, оно всплывает к document, вот он Вам его и показывает. Несмотря на то, что всплытие события прошло через ваш <a>
, его инициировал именно img(тот самый event.target). А вот инициировать его через <a>
у Вас не выйдет, так как он не видимый и указателем мышки вы над ним провести не сможете. И обработчика в нем у Вас не стоит, который бы его перехватил на всплытии, он у Вас только на document выше повешен.
И не путайте визуальную видимость для глаза и видимость для дерева отображения DOM, это разные вещи. Вложенные элементы как раз таки видны дереву.
Update 2
Если только ссылки, то возможно вас устроит такой вариант:
for(i=0; i < document.links.length; i++) {
document.links[i].addEventListener('mouseover', function(e) { ... }, false);
}