10

サイズ変更イベントを追加する（変更されたウィンドウサイズをリッスンする）通常の方法は次のとおりです。

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

しかし、私はこのイベントハンドラーをに追加したい、document.bodyまたはさらに良いものにしたいdocument（理由は聞かないでください、しかし私はウィンドウを使用できません）

//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)

問題は、これが機能しないことです。なぜかわからないの？MB私は何かを逃しましたか？

これは機能します（しかし、もう一度使用したいもの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')}
4

3 に答える 3

11

Mozilla Docs は次のように述べています。

「任意の要素にonresize 属性を指定できますが、ウィンドウ オブジェクトだけがresize イベントを持ちます。他の要素のサイズ変更 (スクリプトを使用して img 要素の幅または高さを変更するなど) では、resize イベントは発生しません。」

実例を確認してください 

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;

編集: イベント バブルを停止すると、document.body.onresize イベントは呼び出されません。

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

*更新: *

a）最初に理解することは、サイズ変更イベントがから伝播されること window > document > body です。上記のすべてのノードでサイズ変更イベントを定義している場合、イベントは下方に伝播され、それぞれが呼び出されます

b) 違いを b/wwindow.resizeで尋ねた場合[body/document].onresize、 window.resizeイベントは html4 仕様で定義された標準イベントであり、[body/document].onresize は非標準イベントとして使用可能でした (一部のブラウザーでは実装されていますが、すべてではありません)。ただし、後者の onresize イベントはHTML5 仕様で追加されています。 体に。

w3c検証サイトにアクセスして、 Doctype を使用して次の html を検証する 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>

c)結論。 window.addEventListener() には、Dom レベル 2 イベント仕様のみが付属しており、その仕様で指定されたイベントのイベント リストを追加するだけです (Dom レベル 3 イベントもこれをサポートします)。DOM レベルを読み取ります。＆これ

于 2013-01-03T13:02:33.867 に答える
2

実際にブラウザーの構造を見て、どのオブジェクトにどのイベントがあるかを確認する必要があります。ウィンドウには、ウィンドウのサイズが変更されたときにトリガーされるサイズ変更イベントがあり、ドキュメントはウィンドウ オブジェクト内に存在しwindow->document->elements、それぞれが階層内にあります。独自のイベントがあります。

于 2013-01-03T11:10:34.193 に答える
0

jQueryを使用して、これは私のために働いた：

var windowWidth  = $(window).width();
var windowHeight = $(window).height()
window.addEventListener("orientationchange", function() {
        windowWidth  = $(window).width();
        windowHeight = $(window).height();
}, false);
于 2013-10-23T20:04:34.183 に答える