【JavaScript】DOM1级 2级事件及 BOM 对象 Window History Location Document

一二__

于 2024-10-10 09:15:44 发布

阅读量541

点赞数 8

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

本文链接：https://blog.csdn.net/m0_66584716/article/details/142812156

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、事件

在 JavaScript 中，事件是与用户交互或系统操作相关的动作。事件机制允许开发者在用户与网页交互时做出响应，比如点击按钮、键入文本或滚动页面。

网页中的每个元素都可以通过行为触发相应的事件，如：点击按钮 —> 产生事件 —> 执行操作。

事件的三要素是：事件源、事件、事件处理程序

事件源：触发事件的元素（谁触发了事件）
事件类型：如 click 单击事件（触发了什么事件）
事件处理程序：事件触发后要执行的代码（函数形式），也称事件处理函数（触发事件以后要做什么）

1-1 DOM Level 0

DOM0 级事件是最初的 DOM 事件处理模型，它仅通过 HTML 属性来处理事件。这是最早期的事件处理机制，通常被称为“传统事件处理”。一个 DOM 对象同一个事件类型只能绑定一个事件处理函数，如果有多个就会覆盖。不支持事件捕获（即事件传播的阶段）和事件移除功能。

使用方式

直接在 HTML 元素中使用事件处理属性，如 onclick、onmouseover 等。
可以在 JavaScript 中直接给 DOM 元素的事件属性赋值来指定事件处理程序。

<!-- 在 HTML 中直接指定事件处理程序 -->
<button onclick="alert('Button clicked')">Click Me</button>

<!-- 在 JavaScript 中设置事件处理程序 -->
<script>
    document.getElementById('myButton').onclick = function() {
        alert('Button clicked');
    };
</script>

onload

onload 事件在页面或资源（如图像、脚本或样式表）完全加载完成后触发。对于整个页面，这意味着所有的 HTML 内容、样式、脚本以及图像等资源都已经完全加载和解析。

页面加载完成时执行代码

<body onload="alert('页面加载完成！')">
    <h1>欢迎来到我的网站</h1>
</body>

加载图像时执行代码

<body>
    <img id="myImage" src="example.jpg" alt="Example Image">
    <script>
        var myImage = document.getElementById("myImage");
        myImage.onload = function() {
            alert("图像加载完成！");
        };
    </script>
</body>

onload 事件在页面中所有资源都加载完毕时才会触发，因此它适用于需要确保所有资源都准备好的操作，例如初始化脚本。

鼠标事件

onclick

单击事件，双击事件与事件解绑

<body>
    <button id="btn">点击</button>
    <script>
        var btn = document.getElementById("btn");
        // 点击事件
        btn.onclick = function () {
            alert("click - 1");
        } 
        // 双击事件
        btn.ondblclick = function () {
            alert("click - 2");
        } 
        // 事件属性上绑定一个null以达到解绑作用
        // btn.onclick = null; 
    </script>
</body>

onmouseover

鼠标悬停事件

<body>
    <div id="hoverArea">将鼠标悬停在这里</div>
    <script>
        var hoverArea = document.getElementById("hoverArea");
        hoverArea.onmouseover = function() {
            alert("鼠标悬停在区域上！");
        };
    </script>
</body>

键盘事件

onkeydown 事件在用户按下键时触发
onkeyup 事件在用户释放键时触发
onkeypress 事件则在按下并释放键时触发，主要用于处理字符输入。
onkeypress 主要用于处理可打印的字符； onkeydown 和 onkeyup 适用于捕获所有类型的键盘事件。

onkeydown

键盘按下事件

<body>
    <input id="textInput" type="text" placeholder="按下键盘上的任何键">
    <script>
        var textInput = document.getElementById("textInput");
        textInput.onkeydown = function(event) {
            alert("按下的键码是：" + event.keyCode);
        };
    </script>
</body>

onkeyup

键盘释放事件

<body>
    <input id="textInput" type="text" placeholder="释放键盘上的任何键">
    <script>
        var textInput = document.getElementById("textInput");
        textInput.onkeyup = function(event) {
            alert("释放的键码是：" + event.keyCode);
        };
    </script>
</body>

onkeypress

键盘按下并释放

使用 onkeypress 事件来显示用户按下的键。用户在输入框中按下并释放一个键时，displayKey 函数会显示所按的键的字符。

<body>
    <form>
        <label for="inputField">Type something:</label>
        <input type="text" id="inputField" onkeypress="displayKey(event)">
    </form>
    <div id="keyDisplay"></div>
    <script>
        function displayKey(event) {
            var key = String.fromCharCode(event.charCode);
            document.getElementById('keyDisplay').textContent = 'You pressed: ' + key;
        }
    </script>
</body>

表单事件

onsubmit

表单提交事件

<body>
    <form id="myForm">
        <input type="text" placeholder="输入内容">
        <input type="submit" value="提交">
    </form>
    <script>
        var form = document.getElementById("myForm");
        form.onsubmit = function(event) {
            event.preventDefault(); // 阻止表单提交
            alert("表单提交被拦截！");
        };
    </script>
</body>

onchange

表单元素事件

<!-- 输入框值变化时执行代码 -->
<body>
    <input id="myInput" type="text" placeholder="输入一些内容">
    <script>
        var myInput = document.getElementById("myInput");
        myInput.onchange = function() {
            alert("输入框的值已经改变为：" + myInput.value);
        };
    </script>
</body>
<!-- 下拉菜单选择变化时执行代码 -->
<body>
    <select id="mySelect">
        <option value="1">选项 1</option>
        <option value="2">选项 2</option>
        <option value="3">选项 3</option>
    </select>
    <script>
        var mySelect = document.getElementById("mySelect");
        mySelect.onchange = function() {
            alert("选择的值是：" + mySelect.value);
        };
    </script>
</body>

onchange 事件通常在控件的值被修改并失去焦点时触发。对于文本输入框，如果希望在用户每次输入时都能触发事件，可以考虑使用 oninput 事件。

onblur

元素失去焦点

使用 onblur 事件来验证输入框的内容。用户在输入框失去焦点时，validateInput 函数会被调用。如果输入框的值为空，会弹出一个警告框。

<body>
    <form>
        <label for="username">Username:</label>
        <input type="text" id="username" onblur="validateInput()">
    </form>
    <script>
        function validateInput() {
            var input = document.getElementById('username');
            if (input.value.trim() === '') {
                alert('Username cannot be empty.');
            }
        }
    </script>
</body>

onfocus

元素获得焦点

使用 onfocus 事件来提示用户输入信息。当用户点击或聚焦在输入框上时，showTooltip 函数会显示一个提示框。当用户离开输入框时，hideTooltip 函数会隐藏提示框。

<style>
#tooltip {display: none;background-color: #f9f9f9;border: 1px solid #ccc;padding: 5px;position: absolute;z-index: 1;}
</style>
<body>
    <form>
        <label for="username">用户名: </label>
        <input type="text" id="username" onfocus="showTooltip()" onblur="hideTooltip()">
        <div id="tooltip">请输入用户名......</div>
    </form>
    <script>
        function showTooltip() {
            var tooltip = document.getElementById('tooltip');
            tooltip.style.display = 'block';
        }

        function hideTooltip() {
            var tooltip = document.getElementById('tooltip');
            tooltip.style.display = 'none';
        }
    </script>
</body>

1-2 DOM Level 1

DOM1 级事件是 DOM 事件模型的一个扩展，它引入了 addEventListener 方法，用于更灵活和强大的事件处理。允许一个元素绑定多个事件处理程序，而不像 DOM0 级事件那样只允许一个事件处理程序（对于相同类型的事件）。

提供了更多的事件控制选项，比如事件捕获和事件冒泡。
提供了 removeEventListener 方法来移除事件处理程序。

<button id="myButton">Click Me</button>
<script>
    // 使用 addEventListener 绑定事件处理程序
    document.getElementById('myButton').addEventListener('click', function() {
        alert('Button clicked');
    });

    // 还可以添加多个处理程序
    document.getElementById('myButton').addEventListener('click', function() {
        console.log('Another handler');
    });
</script>

二、BOM 对象

BOM（Browser Object Model）浏览器对象模型

BOM 提供了独立于内容的、可以与浏览器窗口进行互动的对象结构

在这里插入图片描述

BOM 可实现功能

弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口的大小
页面的前进、后退

2-1 Window 对象

window 对象是浏览器中最顶级的对象，它代表了浏览器窗口，并且在全局作用域中所有的全局变量和函数都作为 window 对象的属性存在。

常用属性

属性名称	说明
history	有关客户访问过的 URL 的信息
location	有关当前 URL 的信息

window.属性名 = "属性值"
window.location = "http://www.baidu.com";

常用方法

方法名称	说明
prompt()	显示可提示用户输入的对话框
alert()	显示带有一个提示信息和一个确定按钮的警示框
confirm()	显示一个带有提示信息、确定和取消按钮的对话框
close()	关闭浏览器窗口
open()	打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout()	在指定的毫秒数后调用函数或计算表达式
setInterval( )	按照指定的周期（以毫秒计）来调用函数或表达式

// confirm() 将弹出一个确认对话框
confirm("对话框中显示的纯文本")

<script type="text/javascript">
    var flag = confirm("确认要删除此条信息吗？");
    if(flag == true)
        alert("删除成功！");
    else
        alert("你取消了删除");
</script>

confirm() 与 alert()、 prompt() 区别

alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变
prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息
confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用

// open() 打开一个新选项卡
window.open(url, windowName, windowFeatures);

弹出层组件 layer

Layui 文档

layer 组件通常指的是一种用于创建弹出层、对话框或者模态窗口（modal）的前端UI组件。这类组件能够帮助开发者轻松地在网页上添加各种类型的浮层效果，如提示信息、确认框、加载层等。

2-2 History 对象

属性	描述
length	返回历史列表中的网址数

方法	描述
back()	加载 history 列表中的前一个 URL
forward()	加载 history 列表中的下一个 URL
go()	加载 history 列表中的某个具体页面

history.back()    == 等价 ==> history.go(-1)   浏览器中的“后退”
history.forward() == 等价 ==> history.go(1)    浏览器中的“前进”

<body>
    <a href="index.html">点我跳转到首页</a>
    <button id="btn1">点击前进一页</button>
    <button id="btn2">点击后退一页</button>
    
    <script>
        var btn1 = document.querySelector('#btn1')
        var btn2 = document.querySelector('#btn2')
        btn1.onclick = function (){
            history.forward() // history.go(1)
        }
		btn2.onclick = function () {
            history.back() // history.go(-1)
        }    
    </script>
</body>

2-3 Location 对象

常用属性

属性	描述
location.search	返回 URL 的查询字符串部分，包括问号 `?`
location.hash	返回 URL 的哈希部分，包括井号 `#`
location.host	返回 URL 的主机部分，包括端口号（如果有的话）
location.hostname	返回 URL 的主机名部分（不包括端口号）
location.href	返回整个 URL 或设置 URL
location.pathname	返回 URL 的路径部分
location.port	返回 URL 的端口号部分（如果有的话）
location.protocol	返回 URL 的协议部分（例如 `http:` 或 `https:`）
location.origin	返回当前页面的原始 URL 的基础部分包含协议、主机名（和端口号，如果有的话）

// 1、location.search
console.log(window.location.search); // 例如: "?query=123"

// 2、location.hash
console.log(window.location.hash); // 例如: "#section"

// 3、location.host
console.log(window.location.host); // 例如: "example.com:80"

// 4、location.hostname
console.log(window.location.hostname); // 例如: "example.com"

// 5、location.href
console.log(window.location.href); // 例如: "https://example.com/path?query=123"

// 6、location.pathname
console.log(window.location.hostname); // 例如: "example.com"

// 7、location.port
console.log(window.location.port); // 例如: "80"

// 8、location.protocol
console.log(window.location.protocol); // 例如: "https:"

// 9、location.origin
// 假设当前页面的 URL 是 "https://example.com:8080/path/page.html"
console.log(window.location.origin); // 输出: "https://example.com:8080"

常用方法

方法	描述
assign(url)	将浏览器的当前 URL 修改为指定的 URL
reload(forcedReload)	重新加载当前页面。如果 `forcedReload` 参数为 `true`，则强制从服务器重新加载
replace(url)	将浏览器的当前 URL 修改为指定的 URL，但不会在历史记录中留下记录

<body>
    <button>点我跳转百度</button>
    <button>点我跳转有道</button>
    <button>点我跳转csdn</button>
    <button>点我刷新</button>

    <script>
        var btn = document.querySelectorAll('button')
        btn[0].onclick = function () {
            location.href = 'https://www.baidu.com/'
        }
        btn[1].onclick = function () {
            location.assign('https://fanyi.youdao.com/')
        }
        btn[2].onclick = function () {
            location.replace('https://www.csdn.net/')
            // 不记录历史记录,直接替换当前页面
        }
        btn[3].onclick = function () {
            location.reload(true)
            // true 强制从服务器端重新获取当前资源(ctrl+f5)
            // false 浏览器是从缓存中读取内容
        }
    </script>
</body>

location 和 history 对象的应用

<a href="javascript:location.href='https://www.baidu.com/'">百度</a>
<a href="javascript:history.back()">后退</a>
<a href="javascript:history.forward()">前进</a>
<a href="javascript:location.reload()">刷新本页</a>

2-4 Document 对象

常用属性

属性	描述
referrer	返回载入当前文档的 URL
URL	返回当前文档的 URL

应用

判断页面是否是链接进入
自动跳转到登录页面

var preUrl = document.referrer;  //载入本页面文档的地址
if(preUrl == ""){	
      document.write("<h2>您还未登录，5秒后将自动跳转到登录页面</h2>");
      setTimeout("javascript:location.href='login.html'",5000);
}

常用方法

querySelector 和 getElement* 系列方法（如 getElementById, getElementsByClassName, getElementsByTagName, getElementsByName）都是用于在DOM中选择元素的方法，但它们在功能和使用方式上有一些重要的区别。

方法	描述	补充
getElementById(id)	返回对拥有指定id的第一个对象的引用	对象的 id 唯一
getElementsByName(name)	返回带有指定名称的对象的集合	相同 name 属性
getElementsByTagName(tagName)	返回带有指定标签名的对象的集合	相同的元素
getElementsByClassName(className)	返回带有指定类名的对象的集合	相同类名的元素
querySelector(selector)	返回文档中第一个匹配指定CSS选择器的元素	支持复杂的CSS选择器
querySelectorAll(selectors)	返回文档中所有匹配指定CSS选择器的元素	返回静态的NodeList
write()	向文档写文本、HTML 表达式或 JavaScript 代码

使用 getElementsByName 和 getElementsByTagName 方法来获取表单输入元素的值，并将这些值拼接成一个字符串，然后插入到页面中的某个元素里

<body>
    <form>
        <input type="text" name="season" value="Spring">
        <input type="text" name="season" value="Summer">
        <input type="text" name="season" value="Autumn">
        <input type="text" name="season" value="Winter">
    </form>

    <div id="replace"></div>

    <script>
        // 使用 getElementsByName
        var aInputByName = document.getElementsByName("season");
        if (aInputByName) {
            var sStrByName = Array.from(aInputByName).map(input => input.value).join('  ');
            document.getElementById("replace").innerHTML = "By Name: " + sStrByName;
        }

        // 使用 getElementsByTagName
        var aInputByTag = document.getElementsByTagName("input");
        if (aInputByTag) {
            var sStrByTag = Array.from(aInputByTag).map(input => input.value).join('  ');
            document.getElementById("replace").innerHTML += "<br>By Tag: " + sStrByTag;
        }
    </script>
</body>

使用 getElementsByClassName 方法将获取所有具有特定类名的元素，并将它们的值或内容拼接成一个字符串，然后插入到页面中的某个元素里

<body>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>

    <div id="result"></div>

    <script>
        // 使用 getElementsByClassName 获取所有 class 为 "item" 的元素
        var items = document.getElementsByClassName("item");

        // 初始化一个空字符串来存储结果
        var resultStr = "";

        // 遍历所有找到的元素
        for (var i = 0; i < items.length; i++) {
            // 将每个元素的内容添加到结果字符串中，并在每个元素之间添加换行符
            resultStr += items[i].innerHTML + "<br>";
        }

        // 将结果字符串设置为 id 为 "result" 的元素的 innerHTML
        document.getElementById("result").innerHTML = resultStr;
    </script>
</body>

querySelector 返回文档中第一个匹配指定CSS选择器的元素。如果没有找到匹配的元素，则返回 null。

语法：document.querySelector(selector)

// 获取第一个具有 "example" 类名的元素
var element = document.querySelector(".example");

// 获取 ID 为 "uniqueId" 的元素
var elementById = document.querySelector("#uniqueId");

// 获取所有具有 "data-category='fruit'" 属性的第一个元素
var fruitElement = document.querySelector("[data-category='fruit']");

querySelectorAll 允许使用 CSS 选择器来选取文档中的多个元素。方法返回一个静态的 NodeList

语法：document.querySelectorAll(selectors);

// 获取所有 class 为 "item" 的元素
var items = document.querySelectorAll(".item");

// 获取所有 class 为 "item" 或 "highlight" 的元素
var elements = document.querySelectorAll(".item, .highlight");

// 获取 id 为 "container" 下的所有 class 为 "item" 的元素
var items = document.querySelectorAll("#container .item");

单个元素对象（直接使用[返回具体的标签元素,不需要用序号取值]）	集合（需要通过[序号]来获取对应的节点）
document.getElementById()	document.getElementsByClassName() 不兼容IE9以下的
document.querySelector() 不兼容IE7及以下的浏览器	document.getElementsByTagName() 不兼容IE7及以下的浏览器
	document.querySelectorAl1() 不兼容IE7及以下的浏览器

document.write 直接操作整个文档，用于将指定的字符串写入到文档中。如果在文档加载完成后调用，它会覆盖整个文档。

// 在文档中写入内容
document.write('<p>这是一个段落。</p>');

一二__

关注

8
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

【JavaScript】DOM1级 2级事件及 BOM 对象 Window History Location Document

文章目录

一、事件

1-1 DOM Level 0

onload

鼠标事件

onclick

onmouseover

键盘事件

onkeydown

onkeyup

onkeypress

表单事件

onsubmit

onchange

onblur

onfocus

1-2 DOM Level 1

二、BOM 对象

2-1 Window 对象

常用属性

常用方法

2-2 History 对象

2-3 Location 对象

常用属性

常用方法

2-4 Document 对象

常用属性

常用方法