Почему ключевое слово this в обработчиках событий document.body ссылается на объект глобального окна? - PullRequest
Новая
       6

Почему ключевое слово this в обработчиках событий document.body ссылается на объект глобального окна?

5 голосов
/ 29 сентября 2019 
<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        body {
            height: 1000px;
        }
    </style>
    <title>Scroll</title>
</head>
<body>
    <button id="btn">click</button>
    <script type="text/javascript">
        document.body.onscroll = function() {
            alert(this);// displays [object Window], instead of [object HTMLBodyElement]
        };

        document.getElementById('btn').onclick = function() {
            alert(this);// displays [object HTMLButtonElement]
        }
    </script>
</body>
</html>

Я поместил ключевое слово this в обработчик событий элемента кнопки и в другой обработчик элемента body, но второе ключевое слово this ссылается на объект глобального окна.Почему?

Ответы [ 3 ]

3 голосов
/ 29 сентября 2019

Поскольку body не прокручивается, window имеет значение.

1 голос
/ 29 сентября 2019

Это потому, что элемент body предоставляет в качестве атрибутов содержимого обработчика событий ряд обработчиков событий объекта Window.

В настоящее время такие события: blur, error, focus, load, resize и scroll.

Этот список называется "Набор обработчиков событий элемента тела, отражающего окна" .

(см. Дляпример: https://html.spec.whatwg.org/dev/webappapis.html)

0 голосов
/ 29 сентября 2019

document.getElementById('btn').onclick возвращает object HTMLButtonElement, поскольку this относится к вызываемому объекту.В данном случае это элемент button.

this относится не к области видимости, а к контексту вызова.Вы вызываете this для элемента body при прокрутке.Однако тело не прокручивается, поэтому оно будет ссылаться на объект по умолчанию, который возвращает окно.(Окно в браузере).

...