Rumah > hujung hadapan web > tutorial js > Objek tetingkap di teras BOM (perkongsian ringkasan)

Objek tetingkap di teras BOM (perkongsian ringkasan)

WBOY
Lepaskan: 2022-08-05 16:29:10
ke hadapan
1860 orang telah melayarinya

Artikel ini membawa anda pengetahuan yang berkaitan tentang javascript, yang terutamanya memperkenalkan isu yang berkaitan dengan peristiwa biasa objek windows Objek tetingkap ialah objek peringkat atas penyemak imbas dan ditakrifkan dalam peranan global . Pembolehubah dan fungsi dalam domain akan menjadi sifat dan kaedah objek tetingkap Mari kita lihat bersama-sama.

Objek tetingkap di teras BOM (perkongsian ringkasan)

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Ikhtisar 1 BOM

1.1 Apakah itu BOM

BOM (Model Objek Penyemak Imbas) ialah model objek penyemak imbas, yang menyediakan interaksi bebas kandungan dengan objek tetingkap penyemak imbas , objek terasnya ialah tetingkap.

BOM terdiri daripada satu siri objek yang berkaitan, dan setiap objek menyediakan banyak kaedah dan sifat.

BOM tidak mempunyai piawaian Organisasi penyeragaman untuk sintaks JavaScript ialah ECMA, dan organisasi penyeragaman untuk DOM ialah W3C pada asalnya merupakan sebahagian daripada standard penyemak imbas Netscape.

Halaman belakang, hadapan, muat semula, saiz tetingkap, tatal, dll. semuanya boleh menggunakan BOM

D O M

Model Objek Dokumen

DOM menganggap dokumen sebagai objek

Objek peringkat atas DOM ialah d o c u m e n t

DOM terutamanya belajar mengendalikan elemen halaman

DOM ialah spesifikasi standard W3C

B O M

Model Objek Pelayar

Anggap pelayar warna sebagai objek

Objek peringkat atas BOM ialah w i n d o w

BOM mempelajari beberapa objek yang berinteraksi dengan tetingkap penyemak imbas

BOM ditakrifkan oleh pengeluar penyemak imbas pada penyemak imbas masing-masing dan mempunyai keserasian yang lemah

Bandingkan BOM dan DOM dalam Kawasan dalam penyemak imbas

Objek tetingkap di teras BOM (perkongsian ringkasan)

1.2 Komposisi BOM

BOM lebih besar daripada DOM, ia mengandungi DOM.

Objek tetingkap di teras BOM (perkongsian ringkasan)

Objek tingkap ialah peringkat atas objek penyemak imbas , yang mempunyai dua peranan.

1. Ia adalah antara muka untuk JS untuk mengakses tetingkap penyemak imbas.

2. Ia adalah objek global. Pembolehubah dan fungsi yang ditakrifkan dalam skop global akan menjadi sifat dan kaedah objek tetingkap.

Nota: Tetingkap atribut khas.nama di bawah tetingkap

cth tetingkap objek peringkat atas 05-BOM.html

nbsp;html>
  <meta>
  <meta>
  <meta>
  <title>Document</title>
  <script>
    // window.document.querySelector();
    var num = 10;
    console.log(num); // 10
    console.log(window.num);  // 10
    function fn() {
      console.log(11);
    }
    fn();  // 11
    window.fn();   // 11
    // alert(11);
    // window.alert(11);
    console.dir(window);
    // var name = 10;  // 声明对象最好不要用  name
    console.log(window.name);
  </script>
Salin selepas log masuk

Objek tetingkap di teras BOM (perkongsian ringkasan)

2 Peristiwa biasa objek tetingkap

2.1 Peristiwa pemuatan tetingkap

window.onload = function() {}或者
window.addEventListener ("load",function(){}) ;
Salin selepas log masuk

window.onload ialah acara pemuatan halaman tetingkap), yang akan dicetuskan apabila kandungan dokumen dimuatkan sepenuhnya Untuk acara (termasuk imej, fail skrip, fail CSS, dll.), fungsi pengendali dipanggil.

Notamaksudnya:

  • Dengan window.onload, anda boleh menulis kod JS di atas elemen halaman, kerana onload menunggu semua kandungan halaman untuk dimuatkan. Selepas itu, laksanakan fungsi pemprosesan.

  • Kaedah acara pendaftaran tradisional window.onload hanya boleh ditulis sekali jika terdapat berbilang, window.onload yang terakhir akan digunakan.

  • Tiada had jika anda menggunakan addEventListener

document.addEventListener('DOMContentLoaded',function() {})
Salin selepas log masuk

Apabila acara DOMContentLoaded dicetuskan, hanya apabila pemuatan DOM selesai, tidak termasuk helaian gaya dan imej , kilat dsb.

Hanya disokong oleh le9 dan ke atas

Jika terdapat banyak gambar pada halaman, ia mungkin mengambil masa yang lama dari akses pengguna untuk mencetuskan beban, dan kesan interaktif tidak dapat dicapai, yang akan pasti mempengaruhi pengalaman pengguna Pada masa ini Adalah lebih sesuai untuk menggunakan acara DOMContentLoaded.

cth 06-window common events onload.html

nbsp;html>
  <meta>
  <meta>
  <meta>
  <title>Document</title>
  
  <script>
    // window.onload = function() {
    //   var btn = document.querySelector(&#39;button&#39;); // 获取按钮
    //   btn.addEventListener(&#39;click&#39;, function() {   // 添加点击事件click
    //     alert(&#39;点击我&#39;);  // 弹出对话框
    //   })
    // }
    // window.onload = function() {
    //   alert(22);
    // }

    // 先弹出33,再弹出22,之后点击按钮,弹出点击我
    window.addEventListener(&#39;load&#39;,function() {
      var btn = document.querySelector(&#39;button&#39;); // 获取按钮
      btn.addEventListener(&#39;click&#39;, function() {   // 添加点击事件click
        alert(&#39;点击我&#39;);  // 弹出对话框
      })
    })
    window.addEventListener(&#39;load&#39;,function() {
      alert(22);
    })
    document.addEventListener(&#39;DOMContentLoaded&#39;,function() {
      alert(33);
    })
    // load 等页面内容全部加载完毕才会去执行,包含页面dom元素  图片  flash  css 等等
    // DOMContentLoaded 是 DOM 加载完毕  不包含图片 flash css 等就可以执行  加载速度比  load 更快一些

  </script>
  <button>点击</button>
Salin selepas log masuk

Bahagian kod di atas diulas Kesan pelaksanaan keseluruhan ialah: mula-mula timbul 33, kemudian timbul 22, dan kemudian klik butang , pop timbul klik saya

2.2 Ubah saiz acara tetingkap

window.onresize = function() {}window.addEventListener ("resize", function() {});
Salin selepas log masuk

onresize ialah acara pemuatan ubah saiz tetingkap, yang mana dipanggil apabila dicetuskan fungsi.

:

  • 只要窗口大小发生像素变化,就会触发这个事件。

  • 我们经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度

eg. 07-调整窗口大小事件.html

效果:页面大于800像素方框显示,小于800不显示

nbsp;html>


  <meta>
  <meta>
  <meta>
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>


  <script>
    window.addEventListener(&#39;load&#39;, function() {
      var div = document.querySelector(&#39;div&#39;);
      window.addEventListener(&#39;resize&#39;,function() {
      console.log(window.innerWidth);  
      console.log(&#39;变化了&#39;);
      if(window.innerWidth <= 800) {
        div.style.display = &#39;none&#39;;  
      } else {
        div.style.display = &#39;block&#39;;
      }
    })
    })
  </script>
  <div></div>

Salin selepas log masuk

【相关推荐:javascript视频教程web前端

Atas ialah kandungan terperinci Objek tetingkap di teras BOM (perkongsian ringkasan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:csdn.net
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan