JavaScript语法-BOM和事件

每天早睡

已于 2022-05-16 22:12:34 修改

阅读量248

点赞数

分类专栏：前端文章标签： javascript

于 2022-05-15 23:17:34 首次发布

本文链接：https://blog.csdn.net/BLee_0123/article/details/124789713

版权

前端专栏收录该内容

12 篇文章 1 订阅

订阅专栏

一、BOM简介
BOM（Browser Object Model，浏览器对象模型）是JS与浏览器窗口交互的接口。
如改变浏览器尺寸、滚动条滚动相关特效，要用到BOM技术。
在JS中，一个浏览器窗口就是一个window对象。

1）window对象操作
window对象表示浏览器打开的窗口
window对象是当前JS脚本运行所处的窗口，而这个窗口包含DOM结构，window.document属性就是document对象。
浏览器的每个标签页，都拥有自己的window对象，也就是说，同一个窗口的标签页之间，不会共享一个window对象。

2）全局变量是window对象的属性
全局变量是window对象的属性

var x = 100;
console.log(window.x == x);  // 输出true

这意味着，js文件之间，是共享全局作用域的，即js文件没有作用域隔离功能。

3）内置函数是window对象方法

console.log(window.alert == alert);  // 输出true
console.log(window.isNaN == isNan);  // 输出true

4）window分为哪些部分
在这里插入图片描述

5）window对象常用方法
在这里插入图片描述
说明：对于window对象，属性和方法前面都可以省略window前缀。

6）Location对象属性
在这里插入图片描述

7）Navigator对象
navigator对象通常用于检测浏览器与操作系统的版本。
window.navigator属性可以检索navigator对象。
在这里插入图片描述
例：识别浏览器内核，通常使用navigator.userAgent属性

var broser = navigator.userAgent;
if (broser.indexOf('Trident') > -1) { // IE内核
} else if (broser.indexOf('AppleWebKit') > -1) {  // 苹果谷歌内核
} else if (broser.indexOf('Presto') > -1) {  // Opera内核
} else if (broser.indexOf('Gecko') > -1) { // 火狐内核
}

8）history对象
window.history对象提供了浏览器会话历史的接口。

history.back();  //相当于点击浏览器的回退按钮
history,go(-1);  //相当于history.back()

二、JS事件
在js中，一个事件包含3个部分
事件主角：例如，按钮
事件类型：例如，点击
事件过程：这个事件都发生了些什么

1）事件有哪些
鼠标事件、键盘事件、表单事件、编辑事件、页面事件

2）JS事件运用场景
在js中，事件的调用方式，主要有2种：
在script标签中调用
在元素中调用
语法：
obj.事件名 = function() { }

bt1.onclick = function() {alert("")}
<input type="button" onclick="alterMe()" value="点击"/>

3）鼠标事件
在这里插入图片描述

4）键盘事件
在这里插入图片描述

5）表单事件
在这里插入图片描述

6）编辑事件
在这里插入图片描述

7）页面事件
在这里插入图片描述

8）JS事件监听器
使用addEventListener()方法为元素添加事件，即事件绑定。
语法：
Obj.addEventListener(type,fn,false)
Obj：DOM对象；type：事件类型；fn：函数名
使用removeEventListener(type,fn,false)解绑一个元素事件

9）JS事件event对象
Event对象用来获取一个事件的详细信息
在这里插入图片描述

三、案例
BOM：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS的BOM操作</title>
</head>
<body>
    <p></p>
    <script>
        //证明1：全局变量是window对象的属性
        var  x =  100;
        console.log(window.x == x );  // 输出 true

        //证明2：内置函数是window对象的方法
        console.log(window.isNaN == isNaN  ); // 输出 true
        console.log(window.alert == alert  ); // 输出 true

        //3：识别浏览器内核
        var broser  =  navigator.userAgent ; 
        if (broser.indexOf('Trident') > -1  )  {  
            console.log('IE内核');
        } else if (broser.indexOf('AppleWebKit') > -1  )  {   
            console.log('苹果谷歌内核');
            console.log(broser);
        } else if (broser.indexOf('Presto') > -1  )  {  
            console.log('opera内核');
        } else if (broser.indexOf('Gecko') > -1  )  {  
            console.log('火狐内核');
        } else{
            console.log('其他内核');
        }


    </script>
</body>
</html>

location_hash：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>事件监听示例</title>
        <script>
           document.write(window.location.hash)
        </script>
    </head>
    <body>
        <p>请在浏览器地址栏网址的后面输入：#id=abc后回车，然后观察页面的显示</p>
    </body>
</html>

location_search：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>事件监听示例</title>
        <script>
           document.write(window.location.search)
        </script>
    </head>
    <body>
        <p>请在浏览器地址栏网址的后面输入：?id=abc后回车，然后观察页面的显示</p>
    </body>
</html>

事件监听：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>事件监听示例</title>
        <script>
            window.onload = function()
            {
                var oBtn = document.getElementById('btn');
                oBtn.addEventListener("click",alterMes,false);

                function alterMes()
                {
                    alert("单击事件绑定成功");
                }
            }
        </script>
    </head>
    <body>
        <input id="btn" type="button" value="submit">
    </body>
</html>

关闭当前窗口：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>事件监听示例</title>
        <script>
            window.onload = function()
            {
                var oBtn = document.getElementById('btn');
                oBtn.onclick = function()
                {
                    window.close();
                }
                
            }
        </script>
    </head>
    <body>
        <input id="btn" type="button" value="关闭当前窗口">
    </body>
</html>

关闭新窗口：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>事件监听示例</title>
        <script>
            window.onload = function()
            {
                var btnOpen = document.getElementById("btn_open");
                var btnClose = document.getElementById("btn_close");
                var opener = null;

                btnOpen.onclick = function()
                {
                    opener = window.open("http://www.baidu.com");
                };
                btnClose.onclick = function()
                {
                    opener.close();
                };
            }
        </script>
    </head>
    <body>
        <input id="btn_open" type="button" value="打开当前窗口">
        <input id="btn_close" type="button" value="关闭当前窗口">

    </body>
</html>

单次定时器功能：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>事件监听示例</title>
        <script>
            window.onload = function()
            {
                setTimeout('alert("欢迎学习JS");',3000);
            }
        </script>
    </head>
    <body>
        <p>3秒后显示欢迎语</p>
    </body>
</html>

多次定时器功能：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>事件监听示例</title>
        <script>
           var n = 10;
           window.onload = function(){
              setInterval(countDown,1000);
           }
           function countDown()
           {
               if(n>0){
                   n--;
                   document.getElementById("num").innerHTML=n;
               }
           }
        </script>
    </head>
    <body>
        <p>倒计时:<span id="num">10</span></p>
    </body>
</html>

每天早睡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript语法-BOM和事件

一、BOM简介BOM（Browser Object Model，浏览器对象模型）是JS与浏览器窗口交互的接口。如改变浏览器尺寸、滚动条滚动相关特效，要用到BOM技术。在JS中，一个浏览器窗口就是一个window对象。1）window对象操作window对象表示浏览器打开的窗口window对象是当前JS脚本运行所处的窗口，而这个窗口包含DOM结构，window.document属性就是document对象。浏览器的每个标签页，都拥有自己的window对象，也就是说，同一个窗口的标签页之间，不会共
复制链接

扫一扫