Я что-то пропустил? HTML > Событие изменения размера тела

ProgramBox

Я что-то пропустил? HTML > Событие изменения размера тела

Post author:admin
Запись опубликована:31 октября, 2022
Post category:Вопросы по программированию

#javascript #dom

#javascript #HTML

Вопрос:

Обычный способ добавить событие изменения размера (для изменения размера окна прослушивания) заключается в следующем:

 //works just fine
window.addEventListener("resize", function(){console.log('w')}, true)

но я хочу добавить этот обработчик событий в document.body или даже лучше в document (не спрашивайте меня почему, но я не могу использовать window).

 //this dosn't work
document.body.addEventListener("resize", function(){console.log('b')}, true)

//this also dosn't work
document.addEventListener("resize", function(){console.log('d')}, true)

проблема в том, что это не работает. Я действительно не понимаю, почему? МБ я что-то пропустил?

это работает (но те, которые я снова хочу использовать addEventListener )

 document.body.onresize = function(){console.log('a')}

Так почему document.addEventListener("resize", function(){console.log('d')}, true) же это не работает?

UPD #1

Есть ли способ захватить window.onresize для чего-то другого в этом окне?

UPD #2

И если window это единственный объект, размер которого изменяется, то ПОЧЕМУ это работает? o_O

 document.body.onresize = function(){console.log('a')}

Ответ №1:

В документах Mozilla говорится:

«Любому элементу может быть присвоен атрибут onresize, однако событие изменения размера есть только у объекта window. Изменение размера других элементов (скажем, путем изменения ширины или высоты элемента img с помощью script) не вызовет событие изменения размера. »

пожалуйста, проверьте рабочий пример

 function winResize(e){
 console.log('window reiszed',e);

  //body resize when width increases
 document.getElementById('content').innerHTML ='<div style="width:900px;background:green;border:1px solid red">' Date() '</div><br/>';
}

function docResize(e){
 cosole.log('document resized');   
}

function bodyResize(e){
 console.log('body resized');
}

window.addEventListener("resize", winResize);
document.body.onresize=bodyResize;

Правки:
Если вы остановите события, событие bubble document.body.onresize вызываться не будет: например

  function winResize(e){
     console.log('window reiszed',e);
     e.stopImmediatePropagation()
   }

* Обновление: *

a) Первое, что нужно понять, это то, что событие изменения размера window > document > body будет распространяться, и если вы определили событие изменения размера на всех вышеуказанных узлах и других, событие будет распространяться вниз, и каждый из них будет вызван

б) когда вы спрашиваете разницу в ч / б window.resize , и [body/document].onresize это window.resize событие является стандартным событием, определенным в спецификации html4 и [body / document].onresize был доступен как нестандартное событие (некоторые браузеры реализованы, но не все) Но последнее событие onresize добавляется в спецификацию HTML5 в тело.

Просто чтобы убедиться, зайдите на сайт проверки w3c и проверьте следующий html с помощью Doctype html 4.01 strict , вы увидите, что он будет жаловаться на атрибут onresize :

  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   <html><head><title>test</title></head> 
   <body onresize="somefunc()">
    <div> On resize validation </div>
    </body>
   </html>

в) заключение.
window.addEventListener() поставляется со спецификациями событий уровня Dom 2. добавляйте список событий только для событий, указанных в этой спецификации (событие уровня Dom 3 также поддерживает это), читайте уровни DOM. amp; это

1. хорошо, если «только объект window имеет событие изменения размера», ПОЧЕМУ document.body.onresize работает? o_O

2. на самом деле window.resize событие передается вплоть до document.body элемента. пожалуйста, проверьте мои правки

3. хорошо, я понял, но почему addEventListener это не работает document.body ?

4. Tnx.. Это самый подробный ответ 🙂

Ответ №2:

На самом деле вам следует взглянуть на анатомию браузера и посмотреть, какой объект имеет какие события, window имеет событие изменения размера, которое срабатывает при изменении размера окна, документ находится внутри объекта window, подобного ему window->document->elements , и у каждого в иерархии есть свои собственные события.

Ответ №3:

Это сработало для меня, используя jQuery:

 var windowWidth  = $(window).width();
var windowHeight = $(window).height()
window.addEventListener("orientationchange", function() {
        windowWidth  = $(window).width();
        windowHeight = $(window).height();
}, false);