526互联

BOM、DOM、事件监听

发布时间 2023-10-23 23:28:46作者: lsyy1

BOM

概念：Browser Object Model

　　浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象

组成：

　　Window：浏览器窗口对象

　　Navigator ：浏览器对象

　　Screen：屏幕对象

　　History：历史记录对象

　　Location：地址栏对象

 

Window：浏览器窗口对象

获取：直接使用window，其中window可省略

　　eg:  window.alert("Hello");  -->   alert("Hello");

属性：

　　history：对History对象的只读引用

　　location：用于窗口或框架的Location对象

　　navigator：对Navigator对象的只读引用

方法：

　　alert();　　　  显示带有一段消息和一个确认按钮的警告框

　　confirm();        显示带有一段消息以及确认按钮和取消按钮的对话框

　　　　返回值 true/false

　　setInterval();   按照指定的周期（以毫秒计）来调用函数或计算表达式

　　setTimeout();  在指定的毫秒数后调用函数或计算表达式

例：

延迟___后执行
    setTimeout(function(){
            alert("JS");
    },3000);
            (3000ms -->3s后执行且仅一次)
简写：
    setTime(()=>{
            执行代码块；
},毫秒数);

周期性调用
var i = 1;
    setInterval(function(){
        console.log("定时器执行了" + i + "次");
        i++;}, 2000);
                (2000ms -->2s执行一次
简写：
setInterval(()=>{
        执行代码块；
    },毫秒数);


注：在具体实践中发现：上面的setTimeout执行可打断下面setInterval周期性调用
  （上面alert警告框弹出后，不点击按钮，则下面setInterval不会继续执行）

 

Location

介绍：地址栏对象

获取：使用window.location获取，其中window可省略

　　　　window.location.属性；  ==  location.属性;

属性：

　　href：设置或返回完整的url

　　　　location.href = "https://www. ……”；（跳转到指定地址页面）

 

DOM　　W3C的标准，定义了访问HTML和XML文档的标准

概念：Document Object Model，文档对象模型

　　将标记语言的各个组成部分封装为对应的对象

 

1、Core-DOM-所有文档类型的标准模型

Document：整个文档对象

Element：   元素对象（标签）

Attribute：   属性对象

Text:　　     文本对象

Comment： 注释对象

 

JavaScript通过DOM，就能够对HTML进行操作：

　　改变HTML元素的内容

　　改变HTML元素的样式

　　对HTML DOM 事件作出反应

　　添加和删除HTML元素（动态）

 

2、XML DOM-XML文档的标准模型

3、HTML DOM-HTML文档的标准模型

　　Image ：<img>

　　Button：<input  type = 'button'>

 

JS事件监听

事件：HTML事件是发生在HTML元素上的“事情”

如：按钮被点击、鼠标的移入移出、键盘按键按下等

 

事件监听：JavaScript可以在事件被侦测到时执行代码

 

事件绑定

方式一：通过HTML标签中的事件属性进行绑定

<input  type = "button" onclick = "on()"  value = "按钮1">

<script>
    function  on(){
        alert("我被点击了");
    }
</script>

方式二：通过DOM元素属性绑定
<input  type = "button"  id = "btn"  value = "按钮2">
<script>
    document.getElementById('btn').onclick = function(){
        alert("我被点击了");
    }
</script>

常见事件：

事件名 说明
onclick 鼠标单机事件

onblur

 元素失去焦点
onfocus 元素获得焦点
onload 某个界面或图像被完成加载
onsubmit 当表单提交时触发该事件
onkeydown 某个键盘的按键被按下
onmouseover 鼠标被移动到某元素上
onmouseout 鼠标从某元素移开