Как браузер узнает, какой элемент должен получить событие click или hover?

Question

Javascript позволяет запускать пользовательские события, когда пользователь наводит курсор на элемент или когда пользователь нажимает на элемент.Но как Javascript узнает, какие элементы должны получать событие click?

Например, такой HTML-элемент выглядит так:

<div style="width: 300; height: 300;">
    <a href="hello">Hello World</a>
</div>

Если я нажимаю на ссылку, браузер знает, что нужно выполнить все нажатия.события, прикрепленные к этой ссылке.Но как браузер узнает, где на странице находится ссылка (или даже что она видна?)

Рассмотрим:

<div id="mydiv" style="width: 300; height: 300;">
    <a href="hello">Hello World</a>
</div>
<style>
    #mydiv a {
        display: none;
    }
</style>

Теперь ничего не произойдет, когда я нажму на место, гдеРаньше ссылка была видна.Как браузер узнает, что в этом случае нельзя запускать события щелчка / наведения?Если бы я хотел воссоздать используемый алгоритм, какие элементы мне понадобятся?

Я предполагаю, что в коде браузера есть какая-то функция, которая выглядит следующим образом:

/* Take user's mouse coordinates and return a DOM element. */
function returnElementBasedOnMouseCoordinate(x, y) {

    /* Does a lookup function on some data structure */
    return someElementInTheDom;
}

Как эта функция работает?

Answer 1

Обычно (в смысле WebKit :)) браузеры создают дерево рендеринга , которое примерно соответствует дереву DOM документа, но отражает скорее визуальную, чем логическую структуру документа. Для невидимых элементов ( display: none ) нет соответствующих объектов рендеринга, которые участвуют в обработке событий мыши. Дерево рендеринга изменяется каждый раз, когда изменяется DOM или некоторые его визуальные аспекты (отображение элементов, видимость, размеры и т. Д.).

Answer 2

Элементы, к которым применено display: none (или к их родителям), удаляются из макета, поэтому у них больше нет места на странице.

Если вам более интересно узнать, как HTMLВ целом, компоновка работает, хорошей отправной точкой может стать глава спецификации CSS по модели визуального форматирования .Как только вы поймете это, понимание того, как генерируются события, относительно просто - события сначала отправляются в элемент, который имеет самый высокий z-индекс и содержит точку, по которой вы щелкнули.(В случае, если вы спрашиваете здесь, опять же: #mydiv не имеет местоположения, поэтому он не может содержать точку, по которой вы щелкнули.)