【1】open()：#

• 打开新窗口或者获取对一个已经存在的窗口的引用。
• 第一个参数是目标网址，第二个参数可以为空，第三个参数为窗口的大小

1
let newWindow = window.open("https://www.example.com", "_blank");
2
let newWindow = window.open("https://www.meizitu.com", "_blank",'height=400px,width=400px');

【2】close()：#

• 关闭当前窗口。

1
window.close();

【3】setTimeout()：#

• 在指定的时间延迟后执行一次指定的函数或者一段代码。

1
setTimeout(function(){
2
  // 执行代码
3
}, 100); // 1秒后执行

【4】setInterval()：#

• 以固定的时间间隔重复执行指定的函数或者一段代码。

1
setInterval(function(){
2
  // 执行代码
3
}, 200); // 每2秒执行一次

【5】alert()：#

• 显示一个带有指定消息和一个确认按钮的警告框。

1
window.alert("Hello, World!");

【6】confirm()：#

• 显示一个带有指定消息和两个按钮（确认和取消）的对话框。

1
if (window.confirm("Are you sure?")) {
2
  // 用户点击了确认按钮
3
} else {
4
  // 用户点击了取消按钮
5
}

【7】prompt()：#

• 显示一个带有指定消息和一个文本输入框的对话框。

1
let name = window.prompt("Please enter your name:");

【8】innerHeight 属性#

• 返回浏览器窗口的内部高度（即视口的高度），以像素为单位，不包括浏览器的工具栏、滚动条等元素。
• 使用示例:

1
let windowHeight = window.innerHeight;
2
console.log(windowHeight); // 输出当前窗口的视口高度

【9】innerWidth 属性#

• 返回浏览器窗口的内部宽度（即视口的宽度），以像素为单位，不包括浏览器的工具栏、滚动条等元素。
• 使用示例:

1
let windowWidth = window.innerWidth;
2
console.log(windowWidth); // 输出当前窗口的视口宽度

【10】监听 resize 事件#

• 需要注意的是，这两个属性返回的值会随着窗口的大小调整而改变
  • 因此如果需要监控窗口大小的改变，可以通过监听 resize 事件来实现。

1
window.addEventListener("resize", function() {
2
  let windowHeight = window.innerHeight;
3
  let windowWidth = window.innerWidth;
4
  console.log("Window Height:", windowHeight);
5
  console.log("Window Width:", windowWidth);
6
});

• 在使用这两个属性时，可以根据返回的数值进行相应的布局或调整操作，以适应当前窗口的尺寸。

【11】window.opener#

• 是指打开当前窗口的那个窗口对象。它是 Window 对象的一个属性，用于在当前窗口中引用到打开它的父窗口或者来源窗口。

1
let popup = window.open("popup.html"); // 打开一个弹出窗口

1
let parentWindow = window.opener;
2
console.log(parentWindow); // 输出父窗口对象

1
let currentWindow = window.open("current.html"); // 打开当前窗口
2

3
// 向当前窗口发送消息
4
currentWindow.postMessage("Hello", "http://example.com");

1
window.addEventListener("message", function(event) {
2
  let message = event.data;
3
  let sourceWindow = event.source;
4
  let openerWindow = window.opener;
5

6
  console.log("Message:", message);
7
  console.log("Source Window:", sourceWindow);
8
  console.log("Opener Window:", openerWindow);
9
});

【1】window.document：#

• 此子对象表示当前窗口中的文档对象，用于对页面内容进行读取和修改操作。

• 通过 window.document，可以使用各种方法来查询和修改当前页面的 HTML 结构、CSS 样式和 DOM 元素。

• 例如，要获取页面标题：

1
let pageTitle = window.document.title;
2
console.log(pageTitle);

【2】window.location：#

• 此子对象包含有关当前页面 URL 的信息，并提供了一些与页面导航相关的方法。

• 通过 window.location，可以获取当前页面的 URL、查询字符串参数、路径等信息，并且可以使用一些方法来导航到其他页面。

• 例如，要在新标签页中打开一个 URL：

1
window.location.href = 'https://example.com';

1
let currentURL = window.location.href;
2
console.log(currentURL);
3

4
window.href = url // 跳转到目标地址

1
let protocol = window.location.protocol;
2
console.log(protocol);

1
let host = window.location.host;
2
console.log(host);

1
let hostname = window.location.hostname;
2
console.log(hostname);

1
let port = window.location.port;
2
console.log(port);

1
let pathname = window.location.pathname;
2
console.log(pathname);

1
let searchParams = window.location.search;
2
console.log(searchParams);

1
let hash = window.location.hash;
2
console.log(hash);

1
// 将当前页面重定向到 example.com
2
window.location.assign("http://example.com");

1
// 重新加载当前页面
2
window.location.reload();

【3】window.history：#

• 此子对象用于操作浏览器的历史记录，包括向前和向后导航。
  • 通过 window.history，可以使用一些方法来在历史记录中向前或向后导航，以及获取当前历史记录的状态数量。
• 例如，要后退到上一个页面：

1
window.history.back();

1
let historyLength = window.history.length;
2
console.log(historyLength);

1
window.history.back();

1
window.history.forward();

1
// 后退两个历史记录
2
window.history.go(-2);
3

4
// 前进一个历史记录
5
window.history.go(1);
6

7
// 重新加载当前页
8
window.history.go();

1
// 添加新的历史记录状态
2
window.history.pushState({ page: 1 }, "Page 1", "/page1.html");

1
// 替换当前历史记录状态
2
window.history.replaceState({ page: 2 }, "Page 2", "/page2.html");

【4】window.navigator：#

• 此子对象提供有关浏览器环境和设备的信息，包括用户代理字符串、浏览器版本、操作系统等。
• 例如，要获取用户代理字符串：

1
let userAgent = window.navigator.userAgent;
2
console.log(userAgent);

1
let userAgent = window.navigator.userAgent;
2
console.log(userAgent);

1
let platform = window.navigator.platform;
2
console.log(platform);

1
let vendor = window.navigator.vendor;
2
console.log(vendor);

1
let language = window.navigator.language;
2
console.log(language);

1
let cookieEnabled = window.navigator.cookieEnabled;
2
console.log(cookieEnabled);

1
let plugins = window.navigator.plugins;
2
console.log(plugins);

【1】警告框(alert)：#

• 警告框用于向用户显示一条重要的警告信息，通常包含一个确定按钮用于关闭弹出框。
• 示例代码：

1
alert("这是一个警告框！");

【2】确认框(confirm)：#

• 确认框用于向用户询问一个问题或确认某个操作，通常包含一个确定按钮和一个取消按钮。
• 示例代码：

1
if (confirm("你确定要删除吗？")) {
2
  // 用户点击了确认按钮
3
  // 执行删除操作
4
} else {
5
  // 用户点击了取消按钮
6
  // 执行取消操作
7
}

【3】提示框(prompt)：#

• 提示框用于向用户展示一条信息，并等待用户输入数据，通常包含一个输入框和确定/取消按钮。
• 示例代码：

1
prompt("请输入您的姓名：", "默认值");

【1】过一段时间触发(setTimeout)：#

• 如果需要在经过一定的时间后触发某个操作
  • 可以使用setTimeout函数来设置定时器。
• 示例代码：

1
setTimeout(function() {
2
  // 在延迟后执行的操作
3
}, 5000); // 延迟5秒后执行

1
function foo() {
2
  // 在延迟后执行的操作
3
}
4

5
setTimeout(foo, 5000); // 延迟5秒后执行

• 上述代码将在5秒钟后执行指定的函数。可以根据实际需要调整延迟的时间。

【2】每隔一段时间触发一次(setInterval)：#

• 如果需要每隔一定的时间重复触发某个操作
  • 可以使用setInterval函数来设置定时器。
• 示例代码：

1
setInterval(function() {
2
  // 每隔一段时间执行的操作
3
}, 2000); // 每2秒钟执行一次

1
function bar() {
2
  // 每隔一段时间执行的操作
3
}
4

5
setInterval(bar, 2000); // 每2秒钟执行一次

• 上述代码将每隔2秒钟执行一次指定的函数。同样，可以根据实际需要调整时间间隔。

【3】清除定时器(clearTimeout/clearInterval)#

1
var timer = setTimeout(function() {
2
  // 在延迟后执行的操作
3
}, 5000); // 延迟5秒后执行
4

5
// 如果需要取消定时器
6
clearTimeout(timer);

1
var timer = setInterval(function() {
2
  // 每隔一段时间执行的操作
3
}, 2000); // 每2秒钟执行一次
4

5
// 如果需要取消定时器
6
clearInterval(timer);

【4】案例:#

1
function func2() {
2
        alert("123")
3
    }
4

5
    function show() {
6
        let t = setInterval(func2, 3000); // 每隔3s触发一次
7

8
        function inner() {
9
            clearInterval(t) // 清除定时器
10
        }
11

12
        setTimeout(inner, 9000) // 9s后触发
13
    }
14

15
    show()

• 给定的代码是用JavaScript编写的，定义了两个函数：

  • func2 和 show。

• func2 函数简单地显示一个带有消息 “123” 的弹窗。

• show 函数稍微复杂一些。

  • 它首先定义一个变量 t，并将其赋值为 setInterval 函数的返回值。
  • setInterval 函数设置了一个每300毫秒（或3秒）调用一次 func2 函数的定时器。

• 接下来，show 函数定义了一个名为 inner 的内部函数。

  • 这个内部函数用于使用 clearInterval 函数清除之前定义的定时器。
  • clearInterval 函数停止了 func2 函数的重复调用。

• 最后，show 函数使用 setTimeout 函数计划在900毫秒（或9秒）之后执行 inner 函数。

  • 这意味着，在9秒后，inner 函数将被调用，并通过清除定时器来停止 func2 函数的重复执行。

• 总结一下，show 函数设置了一个定时器，每3秒调用一次 func2 函数，但在9秒后，该定时器被清除，阻止了 func2 函数的进一步执行。

【5】注意：#

• 确保清除定时器：

  • 如果不再需要定时器，应当及时清除，以避免资源浪费。
  • 可以使用clearTimeout或clearInterval函数来取消定时器。

• 考虑浏览器兼容性：

  • 在使用定时器时，应注意不同浏览器对定时器的支持可能存在差异，可以使用各种前端框架或库提供的方法来处理兼容性问题。

• 注意定时器的性能影响：

  • 频繁的定时器操作可能会对网页性能产生一定影响，特别是在移动设备上，所以应慎重使用大量的定时器。

【1】直接查找标签getElement：#

1
var element = document.getElementById("myElement");

1
var elements = document.getElementsByTagName("div");

1
var elements = document.getElementsByClassName("myClass");

【2】半间接查找标签query：#

1
// 使用querySelector查询单个元素
2
var element = document.querySelector(".myClass");

1
// 使用querySelectorAll查询多个元素
2
var elements = document.querySelectorAll("div");

【3】间接查找标签#

【案例】#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
</head>
7
<body>
8

9

10
<div id="d1">最外层第一个div [div]
11
    <div> 第一个div 内的 第一个 div [div>div]</div>
12
    <p class="p1">
13
        第一个div 内的 第一个 p [div>p]
14
        <span>第一个div 内的 第一个 p 下的第一个 span  [div>p>span]</span>
15
    </p>
16
    <p>
17
        第一个div 内的 第二个 p [div>p]
18
    </p>
19
</div>
20

21
<div>
22
    最外层第二个div [div]
23
</div>
24

25
</body>
26
</html>

1
// （1）通过 ID 查询标签 - 返回单个
2
document.getElementById("d1");
3
// <div id=​"d1">​…​</div>​
4

5
// （2） 通过class查询标签 - 返回数组
6
document.getElementsByClassName("p1");
7
// HTMLCollection [p.p1]
8

9
// （3） 通过标签查询标签 - 返回数组
10
document.getElementsByTagName("div")
11
// HTMLCollection(3) [div#d1, div, div, d1: div#d1]

1
let divEle = document.getElementsByTagName("div");
2
// undefined
3

4
divEle
5
// HTMLCollection(3) [div#d1, div, div, d1: div#d1]

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
</head>
7
<body>
8

9
<div>最外层第一个div头顶上的 [div]</div>
10
<div id="d1">最外层第一个div [div]
11
    <div> 第一个div 内的 第一个 div [div>div]</div>
12
    <p class="p1">
13
        第一个div 内的 第一个 p [div>p]
14
        <span>第一个div 内的 第一个 p 下的第一个 span  [div>p>span]</span>
15
    </p>
16
    <p>
17
        第一个div 内的 第二个 p [div>p]
18
    </p>
19
</div>
20

21
<div>
22
    最外层第二个div [div]
23
</div>
24

25
<div>
26
    最外层第二个div脚底下的 [div]
27
</div>
28

29
</body>
30
</html>

1
// 注意是否需要索引取值
2
let pEle = document.getElementsByClassName("p1")[0];
3
// undefined
4

5
pEle
6
// <p class=​"p1">​…​</p>​
7

8

9
// （1）查找父标签
10
pEle.parentElement
11
// <div id=​"d1">​…​</div>​
12
pEle.parentElement.parentElement
13
// <body>​…​</body>​
14
pEle.parentElement.parentElement.parentElement
15
/* <html lang=​"en">​<head>​…​</head>​<body>​…​</body>​</html>​ */
16
pEle.parentElement.parentElement.parentElement.parentElement
17
// null

1
let divEle = document.getElementById("d1");
2
// undefined
3

4

5
divEle
6
// <div id=​"d1">​…​</div>​
7

8
// 取所有的子标签
9
divEle.children
10
/* HTMLCollection(3) [div, p.p1, p]0: div1: p.p12: plength: 3[[Prototype]]: HTMLCollection */
11

12
// 取第一个子标签
13
divEle.firstElementChild
14
// <div>​ 第一个div 内的 第一个 div [div>div]​</div>​
15

16
// 取最后一个子标签
17
divEle.lastElementChild
18
// <p>​ 第一个div 内的 第二个 p [div>p] ​</p>​
19

20
// 同级别下面第一个
21
divEle.nextElementSibling
22
// <div>​ 最外层第二个div [div] ​</div>​
23

24
// 同级别上面第一个
25
divEle.previousElementSibling
26
// <div>​最外层第一个div头顶上的 [div]​</div>​

【1】创建节点：#

• createElement(tagName): 创建一个具有指定标签名的元素节点。
• createTextNode(text): 创建一个包含指定文本内容的文本节点。
• createDocumentFragment(): 创建一个空的文档片段节点，可用于高效地插入多个节点。

【2】获取节点：#

• getElementById(id): 根据元素的id属性获取对应的元素节点。
• getElementsByTagName(tagName): 根据元素的标签名获取一组元素节点。
• getElementsByClassName(className): 根据元素的类名获取一组元素节点。
• querySelector(selector): 使用CSS选择器获取匹配的第一个元素节点。
• querySelectorAll(selector): 使用CSS选择器获取匹配的所有元素节点。

【3】修改节点：#

• node.appendChild(childNode): 将一个节点作为父节点的最后一个子节点添加到指定节点。
• parent.removeChild(childNode): 从父节点中移除指定子节点。
• node.replaceChild(newNode, oldNode): 使用新节点替换旧节点。
• node.insertBefore(newNode, referenceNode): 在参考节点之前插入新节点。

【4】属性操作：#

• element.getAttribute(attribute): 获取指定属性的值。
• element.setAttribute(attribute, value): 设置指定属性的值。
• element.removeAttribute(attribute): 移除指定属性。

【5】文本操作：#

• node.textContent: 获取或设置节点的文本内容。
• node.innerHTML: 获取或设置节点的HTML内容。

【案例】#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
</head>
7
<body>
8
<div id="d1"> div
9
    <p id="p1"> div > p</p>
10
    <span> div > span </span>
11
</div>
12
</body>
13
</html>

1
let imgEle = document.createElement("img");
2
// undefined
3
imgEle
4
// <img>​
5

6
// 向标签内添加图片链接
7
imgEle.src="111.jpg";
8
// '111.jpg'
9
imgEle
10
// <img src=​"111.jpg">​
11

12
// 向图片内设置自定义属性
13
imgEle.setAttribute("name","dream");
14
// undefined
15
imgEle
16
// <img src=​"111.jpg" name=​"dream">​
17

18
// 向图片内设置默认属性
19
imgEle.setAttribute("title","一张图片");
20
// undefined
21
imgEle
22
// <img src=​"111.jpg" name=​"dream" title=​"一张图片">​
23

24
// 向div标签下面塞入img标签
25
let divEle = document.getElementById("d1");
26
// undefined
27
divEle.appendChild(imgEle)
28
// undefined

1
let aEle = document.createElement("a");
2
// undefined
3

4
aEle
5
// <a>​</a>​
6

7
// 设置默认属性：链接地址
8
aEle.href = "https://www.mzitu.com/"
9
// 'https://www.mzitu.com/'
10

11
aEle
12
// <a href=​"https:​/​/​www.mzitu.com/​">​</a>​
13

14
// 设置文本内容
15
aEle.innerText = "点我有你好看"
16
// '点我有你好看'
17

18
aEle
19
// <a href=​"https:​/​/​www.mzitu.com/​">​点我有你好看​</a>​
20

21
// 将a标签插入到指定位置
22
let divEle = document.getElementById("d1");
23
// undefined
24
let pEle = document.getElementById("p1")
25
// undefined
26
divEle.insertBefore(aEle,pEle)
27
// <a href=​"https:​/​/​www.mzitu.com/​">​点我有你好看​</a>​

【6】补充innerText/innerHTML#

1
// 只拿标签内的文本 -- 不识别 html标签
2
divEle.innerText
3
// 'div 点我有你好看\n\ndiv > p\n\ndiv > span'
4

5
// 拿标签内的全部内容和标签 -- 识别 html标签
6
divEle.innerHTML
7
/* ' div\n    <a href="https://www.mzitu.com/">点我有你好看</a><p id="p1"> div &gt; p</p>\n    <span> div &gt; span </span>\n' */

innerText和innerHTML是用于在网页中更新文本内容的两种方法。

它们都可以用于修改HTML元素中的文本，但有一些关键的区别。

1
<div id="myElement">This is <strong>bold</strong> text.</div>
2
<script>
3
   var element = document.getElementById("myElement");
4
   console.log(element.innerText); // 输出："This is bold text."
5
   element.innerText = "Updated text"; // 尝试修改innerText但不会生效
6
</script>

1
<div id="myElement">This is <strong>bold</strong> text.</div>
2
<script>
3
   var element = document.getElementById("myElement");
4
   console.log(element.innerHTML); // 输出："This is <strong>bold</strong> text."
5
   element.innerHTML = "Updated <em>text</em>"; // 修改innerHTML会动态更新页面中的内容
6
</script>

【1】获取属性值：#

可以使用getAttribute()方法来获取HTML元素的属性值。

该方法需要传入属性名作为参数，并返回属性对应的值。

1
// 示例：获取id为myElement的元素的src属性值
2
var element = document.getElementById("myElement");
3
var srcValue = element.getAttribute("src");
4
console.log(srcValue);

【2】获取文本内容：#

可以使用innerText、innerHTML或textContent属性来获取一个元素的文本内容。

这些属性会返回元素内包含的文本，但存在一些差异：

• innerText：返回元素的纯文本内容，不包括HTML标记。
• innerHTML：返回元素的HTML内容，包括HTML标记。
• textContent：返回元素及其所有子元素的文本内容，包括隐藏元素和注释等。

1
// 示例：获取id为myElement的div元素的文本内容
2
var element = document.getElementById("myElement");
3
var textContent = element.textContent;
4
console.log(textContent);

【3】获取用户输入值：#

对于表单元素（如input、select、textarea等）

可以通过获取其value属性来获取用户输入的值。

1
// 示例：获取id为myInput的input元素的值
2
var input = document.getElementById("myInput");
3
var inputValue = input.value;
4
console.log(inputValue);

【4】获取文件#

• 当用户选择一个或多个文件后
  • 可以通过访问.files属性来获取这些文件的信息。
• .files属性返回一个FileList对象
  • 其中包含了所选文件的列表。
  • 可以通过遍历该列表来处理每个文件。
• 以下是一个简单的示例，演示如何使用.files属性获取用户选择的文件：

1
// 获取文件选择框的DOM元素
2
var fileInput = document.getElementById("fileInput");
3

4
// 添加change事件监听器，以便在用户选择文件后执行操作
5
fileInput.addEventListener("change", function() {
6
  // 获取选择的所有文件
7
  var files = fileInput.files;
8

9
  // 遍历文件列表，并处理每个文件
10
  for (var i = ; i < files.length; i++) {
11
    var file = files[i];
12
    console.log("文件名：" + file.name);
13
    console.log("文件类型：" + file.type);
14
    console.log("文件大小（字节）：" + file.size);
15
    console.log("最后修改时间：" + file.lastModified);
16
  }
17
});

• 在以上示例中，我们首先获取具有id="fileInput"的文件选择框的DOM元素，并为其添加了一个change事件监听器。
  • 当用户选择文件后，change事件将被触发。
• 在事件处理程序中，我们使用.files属性获取选择的文件列表，并遍历该列表。
  • 对于每个文件，我们输出了一些基本信息，如文件名、文件类型、文件大小和最后修改时间。

需要注意的是，.files属性在非IE浏览器中提供了广泛的支持

但在IE浏览器中需要使用.value属性来获取文件路径并进行相关处理。

【1】class属性操作#

1
var element = document.getElementById("myElement");
2
var classList = element.classList;
3

4
// 检查是否包含某个类名
5
if (classList.contains("myClass")) {
6
  console.log("myElement包含myClass类名");
7
}
8

9
// 添加类名
10
classList.add("newClass");
11

12
// 移除类名
13
classList.remove("oldClass");
14

15
// 切换类名（如果存在则移除，否则添加）
16
classList.toggle("active");

【2】标签样式#

• 看案例

【案例】#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <style>
7
        .d1 {
8
            height: 400px;
9
            width: 400px;
10
            border-radius: 50%;
11
        }
12

13
        .bg_red {
14
            background-color: red;
15
        }
16

17
        .bg_green {
18
            background-color: green;
19
        }
20

21

22
    </style>
23
</head>
24
<body>
25
<div id="d1" class="d1 bg_green bg_red"></div>
26
</body>
27
</html>

• 类属性操作

1
let divEle = document.getElementById("d1");
2
// undefined
3

4
// （1） 查看当前类标签下的所有属性
5
divEle.classList
6
/* DOMTokenList(3) ['d1', 'bg_green', 'bg_red', value: 'd1 bg_green bg_red'] */
7

8
// 移除当前类标签下的某个属性
9
divEle.classList.remove("bg_green")
10
// undefined
11

12
// 添加当前类标签下的某个属性
13
divEle.classList.add("bg_green")
14
// undefined
15

16
// 校验当前标签下是否包含某个属性
17
divEle.classList.contains("d1")
18
true
19
divEle.classList.contains("d2")
20
false
21

22
// 当前标签下有这个属性则移除，没有这个属性则添加
23
divEle.classList.toggle("bg_red");
24
// false
25
divEle.classList.toggle("bg_red");
26
// true

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <style>
7
        .d1 {
8
            height: 400px;
9
            width: 400px;
10
            border-radius: 50%;
11
        }
12

13
        .bg_red {
14
            background-color: red;
15
        }
16

17
        .bg_green {
18
            background-color: green;
19
        }
20

21

22
    </style>
23
</head>
24
<body>
25
<div id="d1" class="d1 bg_green bg_red"></div>
26
<p>花天酒地，花前月下</p>
27
</body>
28
</html>

• 标签样式

1
let pEle = document.getElementsByTagName("p")[0]
2
// undefined
3

4
// 修改标签样式中的颜色
5
pEle.style.color = "red";
6
// 'red'
7

8
// 修改标签样式中的字体大小
9
pEle.style.fontSize = "28px"
10
// '28px'
11

12
// 修改标签样式中的背景颜色
13
pEle.style.backgroundColor = "green"
14
// 'green'

【1】鼠标事件：#

• click：鼠标点击事件。
• mouseover：鼠标悬停在元素上的事件。
• mouseout：鼠标离开元素的事件。
• mousedown：鼠标按下事件。
• mouseup：鼠标松开事件。
• mousemove：鼠标移动事件。

【2】键盘事件：#

• keydown：键盘按下事件。
• keyup：键盘松开事件。
• keypress：键盘按键被按下并松开事件。

【3】表单事件：#

• submit：表单提交事件。
• change：表单值改变事件。
• focus：表单元素获取焦点事件。
• blur：表单元素失去焦点事件。

【4】文档加载事件：#

• load：页面完全加载完成事件。
• unload：页面关闭或离开事件。

【5】定时器事件：#

• setTimeout：在指定的延迟时间后触发事件。
• setInterval：每隔一定时间触发事件。

【6】自定义事件：#

• 开发者可以根据需要创建自定义事件，并使用dispatchEvent来触发事件。

【7】示例代码：#

1
var button = document.getElementById("myButton");
2

3
button.addEventListener("click", function(event) {
4
  alert("按钮被点击了！");
5
});

• 以上示例代码中，当id为”myButton”的按钮被点击时，会触发点击事件，并弹出一个提示框。

传统的事件属性绑定：#

• 这种方式是通过在HTML标签中直接添加事件属性来实现事件绑定。
  • 例如，我们可以在一个按钮的onclick属性中指定一个JavaScript函数，当按钮被点击时，该函数会被调用。
• 示例代码：

1
<button onclick="myFunction()">点击我</button>
2

3
<script>
4
  function myFunction() {
5
    alert("按钮被点击了！");
6
  }
7
</script>

• 在上述示例中，当按钮被点击时，会调用名为myFunction的JavaScript函数，并弹出一个提示框。

• 这种方式简单直观，适用于简单的事件绑定需求，但对于复杂的交互场景，建议使用下面介绍的现代事件监听绑定方式。

现代的事件监听绑定：#

• 这种方式是通过JavaScript代码动态地选择元素，并以编程方式绑定事件监听器。
  • HTML和JavaScript代码会分离，提高了代码的可读性和可维护性。
• 示例代码：

1
<button id="myButton">点击我</button>
2

3
<script>
4
  var button = document.getElementById("myButton");
5
  button.addEventListener("click", function() {
6
    alert("按钮被点击了！");
7
  });
8
</script>

• 在上述示例中，通过getElementById方法获取id为”myButton”的按钮元素，然后使用addEventListener方法绑定了一个点击事件监听器。
  • 当按钮被点击时，会执行回调函数，并弹出一个提示框。
• 使用现代的事件监听绑定方式，可以更灵活地添加、移除或修改事件监听器，同时也可以实现多个事件监听器同时响应一个事件的目的。

无论选择哪种事件绑定方式，都应根据具体情况来确定使用哪种方法。

传统的事件属性绑定简单易用，适合简单的事件绑定场景；

现代的事件监听绑定更加灵活和可控，适用于复杂的交互需求。