{"./":{"url":"./","title":"JavaScript","keywords":"","body":"JavaScript JavaScript 是一种具有函数优先的轻量级、解释型、即时编译型的编程语言。 最初是作为开发 Web 页面的脚本语言，但随着语言标准的推行，它也被用于很多非浏览器环境。 "},"docs/开始使用.html":{"url":"docs/开始使用.html","title":"开始使用","keywords":"","body":"开始使用 执行下面的代码，输出指定的内容。 document.write('Hello World!'); alert('Hello World!'); console.log('Hello World!'); console.warn('Hello World!'); console.error('Hello World!'); let num = 233; document.write(`${num}`) "},"docs/变量声明.html":{"url":"docs/变量声明.html","title":"变量声明","keywords":"","body":"变量声明 执行下面的代码，声明变量并为其赋值。 let num; num = 233; console.log(num); 也可以在声明变量时直接完成初始化赋值操作。 let num = 233; console.log(233); 还可以一次性声明多个变量并为其赋值。 let num = 233, str = 'Hello World!'; console.log(num, str); 执行下面的代码，使用解构语法为变量赋值。 let [num1, num2, num3] = [1, 2, 3]; console.log(num1); console.log(num2); console.log(num3); 执行下面的代码，交换两个变量的值。 let num1 = 233; let num2 = 666; [num1, num2] = [num2, num1]; console.log(num1, num2); "},"docs/常量声明.html":{"url":"docs/常量声明.html","title":"常量声明","keywords":"","body":"常量声明 常量在声明时必须进行初始化，并且不允许对其重新赋值。 const num = 233; console.log(num); 而对于数组常量或对象常量的修改则不会报错。 const arr = [233, 666]; console.log(arr); arr[1] = 'Hello World!'; arr.push(1.23); console.log(arr); const obj = { name: 'Tom' }; console.log(obj); obj.age = 18; console.log(obj); "},"docs/基本数据类型.html":{"url":"docs/基本数据类型.html","title":"基本数据类型","keywords":"","body":"基本数据类型 JavaScript 中的基本数据类型主要包括数值类型、字符串类型、布尔类型、未定义类型、空类型。 let num = 233; console.log(num, typeof num); let bin = 0b10101; console.log(bin); let oct = 0o777; console.log(oct); let hex = 0xff; console.log(hex); let str = 'Hello World!'; console.log(str, typeof str); let bool = true; console.log(bool, typeof bool); let undef; console.log(undef, typeof undef); let NULL = null; console.log(NULL, typeof NULL); BigInt 数据类型是比数值类型支持范围更大的整数值。 let num1 = 233n; console.log(num1, typeof num1); let num2 = BigInt(666); console.log(num2, typeof num2); let max = Number.MAX_SAFE_INTEGER; console.log(BigInt(max) + BigInt(max)); ES6 中新增了用于存储唯一值的集合数据类型。 let set = new Set([233, 666, 1.23, 233]); console.log(set); console.log(set.size); for (let v of set) { console.log(v); } set.add('Hello World!'); console.log(set); set.delete(666); console.log(set); console.log(set.has(233)); set.clear(); console.log(set); ES6 中还新增了用于存储键值对的映射数据类型。 let map = new Map(); map.set('name', 'Tom'); map.set('func', function () { return 'Hello World!'; }); let obj = { foo: 'bar' }; map.set(obj, [233, 666, 1.23]); console.log(map); console.log(map.size); for (let v of map) { console.log(v); } console.log(map.get('name')); console.log(map.get('func')()); console.log(map.get(obj)); map.delete('name'); console.log(map); map.clear(); console.log(map); Symbol 是 JavaScript 中一种不可变且唯一的数据类型，通常用来创建独一无二的键。 let symbol1 = Symbol(); console.log(symbol1, typeof symbol1); let symbol2 = Symbol('Hello'); console.log(symbol2, typeof symbol2); let symbol3 = Symbol('JavaScript'); console.log(symbol3, typeof symbol3); "},"docs/引用数据类型.html":{"url":"docs/引用数据类型.html","title":"引用数据类型","keywords":"","body":"引用数据类型 JavaScript 中的引用数据类型主要包括数组类型、对象类型、函数类型。 let arr = [1, 2, 3]; console.log(arr, typeof arr); let obj = {}; console.log(obj, typeof obj); function func() { return 233; } console.log(func, typeof func); "},"docs/类型转换.html":{"url":"docs/类型转换.html","title":"类型转换","keywords":"","body":"类型转换 执行下面的代码，将字符串类型强制显式转换为数值类型。 let str = '233'; console.log(str, typeof str); console.log(Number(str), typeof Number(str)); "},"docs/数组操作.html":{"url":"docs/数组操作.html","title":"数组操作","keywords":"","body":"数组操作 执行下面的代码，循环打印数组中所有元素。 let arr = [233, 6.66, 'Hello World!', false]; console.log(arr); for (let i = 0; i 执行下面的代码，向数组末尾添加新的元素。 let arr = [233, 6.66, 'Hello World!', false]; console.log(arr); arr.push('123.456', 'Hello JavaScript!'); console.log(arr); 执行下面的代码，向数组开头添加新的元素。 let arr = [233, 6.66, 'Hello World!', false]; console.log(arr); arr.unshift('123.456', 'Hello JavaScript!'); console.log(arr); 执行下面的代码，删除数组中最后一个元素。 let arr = [233, 6.66, 'Hello World!', false]; console.log(arr); console.log(arr.pop()); console.log(arr); 执行下面的代码，删除数组中第一个元素。 let arr = [233, 6.66, 'Hello World!', false]; console.log(arr); console.log(arr.shift()); console.log(arr); 执行下面的代码，查找数组中的指定元素。 let arr = [233, 6.66, 'Hello World!', false]; console.log(arr.indexOf(6.66)); console.log(arr.includes(false)); 执行下面的代码，截取数组中指定下标的元素。 let arr = [233, 6.66, 'Hello World!', false]; console.log(arr); console.log(arr.slice(1, 4)); 执行下面的代码，遍历数组处理数据并返回新的数组。 const arr1 = [1, 2, 3]; const arr2 = arr1.map(function(ele, index) { console.log(index, ele); return ele * 2; }); console.log(arr1); console.log(arr2); 执行下面的代码，将数组中所有元素转换为字符串。 const arr = [1, 2, 3]; const str = arr.join(); console.log(arr); console.log(str); 执行下面的代码，合并两个数组。 const arr1 = [233, 666]; const arr2 = ['Hello', 'JavaScript']; console.log(arr1.concat(arr2)); console.log([...arr1, ...arr2]); 执行下面的代码，将多维数组降维为一维数组。 const arr1 = [1, 2, 3, [4, 5, 6]]; console.log(arr1.flat()); const arr2 = [1, 2, 3, [4, 5, 6, [7, 8]]]; console.log(arr2.flat(2)); const arr3 = [1, 2, 3, [4, 5, 6, [7, 8, [9, [10]]]]]; console.log(arr3.flat(Infinity)); 执行下面的代码，对数组进行去重操作。 const arr = [233, 666, 1.23, 233, 666]; console.log(arr); let result = new Set(arr); console.log([...result]); 执行下面的代码，求两个数组的并集。 const arr1 = [1, 2, 3, 4, 5, 4, 3, 2, 1]; const arr2 = [4, 5, 6, 5, 4]; let result = new Set([...arr1, ...arr2]); console.log(result); 执行下面的代码，求两个数组的交集。 const arr1 = [1, 2, 3, 4, 5, 4, 3, 2, 1]; const arr2 = [4, 5, 6, 5, 4]; const set1 = new Set(arr1); const set2 = new Set(arr2); let result = [...set1].filter(item => set2.has(item)); console.log(result); 执行下面的代码，求两个数组的差集。 const arr1 = [1, 2, 3, 4, 5, 4, 3, 2, 1]; const arr2 = [4, 5, 6, 5, 4]; const set1 = new Set(arr1); const set2 = new Set(arr2); let result = [...set1].filter(item => !set2.has(item)); console.log(result); "},"docs/函数功能.html":{"url":"docs/函数功能.html","title":"函数功能","keywords":"","body":"函数功能 执行下面的代码，定义并调用指定函数。 function func() { return 233; } console.log(func()); 执行下面的代码，计算两个整数之和。 function sum(x, y) { return x + y; } console.log(sum(233, 666)); 执行下面的代码，为函数指定默认参数。 function sum(x = 0, y = 0) { return x + y; } console.log(sum(233, 666)); console.log(sum()); 执行下面的代码，获取函数的剩余参数。 function func1() { console.log(arguments); } func1(1, 2, 3); function func2(...args) { console.log(args); } func2(1, 2, 3); 执行下面的代码，定义并调用匿名函数。 let func1 = function() { return 233; } let func2 = function(x, y) { return x + y; } console.log(func1()); console.log(func2(233, 666)); 执行下面的代码，定义并调用立即执行函数。 (function() { console.log('Hello World!'); })(); (function(x, y) { console.log(x + y); })(233, 666); 执行下面的代码，定义并调用定时器函数。 let timer1 = setTimeout(function() { console.log('Hello World!'); }, 3000); let timer2 = setInterval(function() { console.log('Hello JavaScript!'); }, 3000); function func() { console.log(233); } let timer3 = setInterval(func, 3000); 执行下面的代码，定义并调用闭包函数。 function outer() { let num = 233; function inner() { console.log(num); } return inner; } const func = outer(); func(); 执行下面的代码，定义并调用箭头函数。 const func1 = () => { console.log('Hello World!'); } func1(); const func2 = num => { console.log(num); } func2(233); const func3 = num => console.log(num); func3(666); const func4 = num => num * 2; console.log(func4(1.23)); 执行下面的代码，定义并调用生成器函数。 function* func() { yield 1; yield 2; yield 3; } for (let v of func()) { console.log(v); } "},"docs/对象使用.html":{"url":"docs/对象使用.html","title":"对象使用","keywords":"","body":"对象使用 执行下面的代码，声明对象并访问其属性。 let obj = { name: 'Tom', age: 18, 'user-name': 'Tom' }; console.log(obj); console.log(obj.name); console.log(obj.age); console.log(obj['user-name']); 执行下面的代码，删除对象中的指定属性。 let obj = { name: 'Tom', age: 18 }; console.log(obj); delete obj.name; console.log(obj); console.log(obj.name); 执行下面的代码，声明对象并访问其方法。 let obj = { func: function() { return 'Hello World!'; } }; console.log(obj); console.log(obj.func()); 执行下面的代码，遍历对象中的所有属性与方法。 let obj = { name: 'Tom', age: 18, func: function () { return 'Hello World!'; } }; console.log(Object.keys(obj)); console.log(Object.values(obj)); console.log(Object.entries(obj)); for (let k in obj) { console.log(k, obj[k]); } 执行下面的代码，使用 Symbol 作为对象属性名或方法名。 let name = Symbol(); let age = Symbol(); let func = Symbol(); let obj = { [name]: 'Tom', [age]: 18, [func]: function () { return 'Hello World!'; } }; console.log(obj); console.log(obj[name]); console.log(obj[age]); console.log(obj[func]()); 执行下面的代码，使用解构语法为变量赋值。 let obj = { name: 'Tom', age: 18 }; let { name, age } = obj; console.log(name); console.log(age); 构造函数是一种特殊的函数，主要用来初始化对象。 function Person(name, age) { this.name = name; this.age = age; } const Tom = new Person('Tom', 20); const Jerry = new Person('Jerry', 18); console.log(Tom); console.log(Jerry); 构造函数的属性和方法被称为静态属性和静态方法。 function Person() {} Person.username = 'anonymous'; Person.call = function() { console.log('Hello World!'); } console.log(Person.username); Person.call(); 在 JavaScript 中所有构造函数中都存在一个原型对象。 function Person(name, age) { this.name = name; this.age = age; } Person.prototype.call = function() { console.log('Hello World!'); } const Tom = new Person('Tom', 20); const Jerry = new Person('Jerry', 18); console.log(Tom); Tom.call(); console.log(Jerry); Jerry.call() 执行下面的代码，用定义类的方式来声明对象。 class Person { name = 'anonymous'; age = 18; constructor(name, age) { this.name = name; this.age = age; } } const Tom = new Person('tom', 20); console.log(Tom); 执行下面的代码，实现类的继承。 class Person { name = 'anonymous'; age = 18; constructor(name, age) { this.name = name; this.age = age; } func() { return [this.name, this.age]; } } class SmartPerson extends Person { gender; constructor(name, age, gender) { super(name, age); this.gender = gender; } func() { return [this.name, this.age, this.gender]; } } const Tom = new Person('tom', 20); console.log(Tom); console.log(Tom.func()); const Jerry = new SmartPerson('jerry', 18, 'female'); console.log(Jerry); console.log(Jerry.func()); 执行下面的代码，定义并访问对象中的私有属性。 class Person { name = 'anonymous'; #age = 18; constructor(name, age) { this.name = name; this.#age = age; } func() { return this.#age; } } const Tom = new Person('tom', 20); console.log(Tom); console.log(Tom.name); console.log(Tom.func()); 执行下面的代码，自定义类的读取和修改行为。 class Person { name = 'anonymous'; get name() { return this.name; } set name(name) { this.name = name; } } const Tom = new Person(); console.log(Tom.name); Tom.name = 'tom'; console.log(Tom.name); 执行下面的代码，使用可选链操作符访问指定变量。 const person = { name: 'tom', age: 20, call: { foo: 'bar', func: () => 'Hello World!' } }; console.log(person?.call?.foo); console.log(person?.call?.bar); console.log(person?.call?.func()); 执行下面的代码，使用空值合并操作符访问指定变量。 let num; console.log(num ?? 233); num ??= 233; console.log(num); Math 对象中包含了 JavaScript 提供的一系列数学运算方法。 console.log(Math.random()); console.log(Math.ceil(3.7)); console.log(Math.floor(3.7)); console.log(Math.max(1, 2, 3)); console.log(Math.min(1, 2, 3)); console.log(Math.pow(3, 2)); console.log(Math.abs(-233)); console.log(Math.trunc(3.5)); console.log(Math.sign(100)); console.log(Math.sign(0)); console.log(Math.sign(-100)); function equal(a, b) { return Math.abs(a - b) Number 对象包含了 JavaScript 提供的一系列数值处理方法。 console.log(Number.isFinite(100)); console.log(Number.isFinite(100 / 0)); console.log(Number.isFinite(Infinity)); console.log(Number.isNaN(233)); console.log(Number.isInteger(666)); console.log(Number.isInteger(1.23)); console.log(Number.parseInt('233Hello')); console.log(Number.parseFloat('3.1415926World')); Date 对象中包含了 JavaScript 提供的一系列日期操作方法。 const date = new Date(); console.log(date); console.log(date.getFullYear()); console.log(date.getMonth()); console.log(date.getDay()); console.log(date.getHours()); console.log(date.getMinutes()); console.log(date.getSeconds()); console.log(Date.now()); Object 对象中包含了 JavaScript 提供的一系列对象操作方法。 console.log(Object.is(233, 233)); console.log(Object.is(NaN, NaN)); let obj1 = { name: 'Tom', age: 20, func: function () { return 'Hello World!'; } }; let obj2 = { name: 'Jerry', age: 18 }; console.log(Object.assign(obj1, obj2)); ES11 引入了 globalThis 内置对象，目的是为所有 JavaScript 运行环境提供标准化接口来访问全局对象。 console.log(globalThis); 执行下面的代码，控制浏览器前进与后退。 history.back(); history.forward(); "},"docs/模块化.html":{"url":"docs/模块化.html","title":"模块化","keywords":"","body":"模块化 执行下面的代码，使用 ES Modules 标准语法导入模块。 JavaScript import * as main from './main.js'; console.log(main.num); console.log(main.str); console.log(main.func()); 上例中的 main.js 文件内容： let num = 233; let str = 'Hello World!'; function func() { return 'Hello JavaScript!'; } export { num, str, func }; 也可以使用默认导出方式。 JavaScript import * as main from './main.js'; console.log(main.default.num); console.log(main.default.str); console.log(main.default.func()); 上例中的 main.js 文件内容： export default { num: 233, str: 'Hello World!', func: function () { return 'Hello JavaScript!'; } }; 还可以使用简易导出方式。 JavaScript import {num, str, func} from './main.js'; console.log(num); console.log(str); console.log(func()); 上例中的 main.js 文件内容： export let num = 233; export let str = 'Hello World!'; export function func() { return 'Hello JavaScript!'; } 执行下面的代码，动态导入模块。 JavaScript Click const btn = document.getElementById('btn'); btn.addEventListener('click', function () { import('./main.js').then(main => main.func()); }); 上例中的 main.js 文件内容： export function func() { alert('Hello World!'); } "},"docs/异步编程.html":{"url":"docs/异步编程.html","title":"异步编程","keywords":"","body":"异步编程 Promise 是 JavaScript 中用于处理异步操作的核心对象，有效避免了传统回调函数的嵌套问题。 let flag = true; const promise = new Promise((resolve, reject) => { flag ? resolve('Successful.') : reject('Unsuccessful.'); }); promise.then( data => console.log(data), error => console.error(error) ); 执行下面的代码，通过异步编程串行执行多个操作。 const promise = new Promise((resolve, reject) => { setTimeout(() => { console.log('Successful #1.'); resolve(['foo']); }, 1000); }); promise .then(data => { return new Promise((resolve, reject) => { setTimeout(() => { console.log('Successful #2.'); data.push('bar'); resolve(data); }, 1000); }); }) .then(data => { return new Promise((resolve, reject) => { setTimeout(() => { console.log('Successful #3.'); data.push('baz'); resolve(data); }, 1000); }); }) .then(data => { console.log(data); }); console.log('Hello World!'); 执行下面的代码，捕获异步编程中的失败信息。 const promise = new Promise((resolve, reject) => { setTimeout(() => { reject('Unsuccessful.'); }, 1000); }); promise.catch(error => { console.error(error); }); 执行下面的代码，模拟异步编程串行执行多个 HTTP 请求。 let result = []; fetch('https://api.example.com/users') .then(response => { if (!response.ok) { throw new Error('Unsuccessful #1.'); } return response.json(); }) .then(data => { console.log('Successful #1.'); result.push(data); return fetch('https://api.example.com/orders'); }) .then(response => { if (!response.ok) { throw new Error('Unsuccessful #2.'); } return response.json(); }) .then(data => { console.log('Successful #2.'); result.push(data); return fetch('https://api.example.com/goods'); }) .then(response => { if (!response.ok) { throw new Error('Unsuccessful #3.'); } return response.json(); }) .then(data => { console.log('Successful #3.'); result.push(data); }) .catch(error => console.error(error)) .finally(() => console.log(result)); console.log('Hello World!'); 执行下面的代码，模拟异步编程并行执行多个 HTTP 请求。 const urls = [ 'https://api.example.com/users', 'https://api.example.com/orders', 'https://api.example.com/goods' ]; Promise.all(urls.map(url => fetch(url))) .then(responses => { return Promise.all( responses.map((response, index) => { if (!response.ok) { throw new Error(`Unsuccessful #${index + 1}.`); } return response.json(); }) ); }) .then(data => console.log(data)) .catch(error => console.error(error)); console.log('Hello World!'); 执行下面的代码，通过函数的方式模拟异步编程串行执行多个操作。 function func1() { fetch('https://api.example.com/users') .then((response) => { if (!response.ok) { throw new Error('Unsuccessful #1.'); } return response.json(); }) .then((data) => console.log(data)); .catch(error => console.error(error)); } function func2() { fetch('https://api.example.com/orders') .then((response) => { if (!response.ok) { throw new Error('Unsuccessful #2.'); } return response.json(); }) .then((data) => console.log(data)); .catch(error => console.error(error)); } function func3() { fetch('https://api.example.com/goods') .then((response) => { if (!response.ok) { throw new Error('Unsuccessful #3.'); } return response.json(); }) .then((data) => console.log(data)); .catch(error => console.error(error)); } async function main() { await func1(); await func2(); await func3(); } main(); 执行下面的代码，通过函数的方式模拟异步编程并行执行多个操作。 function func1() { fetch('https://api.example.com/users') .then((response) => { if (!response.ok) { throw new Error('Unsuccessful #1.'); } return response.json(); }) .then((data) => console.log(data)); .catch(error => console.error(error)); } function func2() { fetch('https://api.example.com/orders') .then((response) => { if (!response.ok) { throw new Error('Unsuccessful #2.'); } return response.json(); }) .then((data) => console.log(data)); .catch(error => console.error(error)); } function func3() { fetch('https://api.example.com/goods') .then((response) => { if (!response.ok) { throw new Error('Unsuccessful #3.'); } return response.json(); }) .then((data) => console.log(data)); .catch(error => console.error(error)); } async function main() { await Promise.all([func1(), func2(), func3()]); } main(); "},"docs/DOM.html":{"url":"docs/DOM.html","title":"DOM","keywords":"","body":"DOM 文档对象模型是用来呈现以及与任意 HTML 或 XML 文档交互的 API 。执行下面的代码，查找并获取符合条件的指定 DOM 元素。 JavaScript Hello World! Hello JavaScript! 1 2 3 const nav = document.querySelector('#nav'); console.log(nav); const box = document.querySelector('.box'); console.log(box); const li = document.querySelector('ul li'); console.log(li); const li1 = document.querySelector('ul li:first-child'); console.log(li1); 执行下面的代码，查找并获取符合条件的所有 DOM 元素。 JavaScript 1 2 3 const li = document.querySelectorAll('ul li'); console.log(li); 执行下面的代码，使用其他方式获取 DOM 元素。 JavaScript Hello World! Hello JavaScript! Hello JavaScript! 1 2 3 const nav = document.getElementById('nav'); console.log(nav); const box = document.getElementsByClassName('box'); console.log(box); const li = document.getElementsByTagName('li'); console.log(li); 执行下面的代码，修改指定 DOM 元素中的 HTML 内容。 JavaScript Hello World! const nav = document.querySelector('#nav'); console.log(nav); nav.innerHTML = 'Hello JavaScript!'; 执行下面的代码，修改指定 DOM 元素的 CSS 属性。 JavaScript Hello World! const box = document.querySelector('.box'); box.style.color = 'red'; 执行下面的代码，修改指定 DOM 元素的类名。 JavaScript Hello World! const box = document.querySelector('.box'); console.log(box.className); box.className = 'nav'; console.log(box.className); 执行下面的代码，操作指定 DOM 元素的类名。 JavaScript .nav { color: red; } Hello World! const box = document.querySelector('.box'); console.log(box.className); box.classList.add('nav'); console.log(box.className); box.classList.remove('box'); console.log(box.className); box.classList.toggle('box'); console.log(box.className); 执行下面的代码，修改指定 DOM 元素的自定义属性。 JavaScript Hello World! const box = document.querySelector('.box'); console.log(box.dataset); console.log(box.dataset.id); box.dataset.id = 233; console.log(box.dataset); console.log(box.dataset.id); 执行下面的代码，查找指定 DOM 元素的父节点。 JavaScript const box = document.querySelector('.box'); console.log(box.parentNode); 执行下面的代码，查找指定 DOM 元素的所有子节点。 JavaScript 1 2 3 const ul = document.querySelector('ul'); console.log(ul.children); 执行下面的代码，查找指定 DOM 元素的兄弟节点。 JavaScript 1 2 3 const li = document.querySelector('.li'); console.log(li.previousElementSibling); console.log(li.nextElementSibling); 执行下面的代码，创建新的 DOM 节点并插入。 JavaScript 1 2 3 const div = document.createElement('div'); document.body.appendChild(div); const ul = document.querySelector('ul'); const p = document.createElement('p'); ul.insertBefore(p, ul.children[0]); 执行下面的代码，克隆指定节点并插入。 JavaScript 1 2 3 const div = document.querySelector('div'); const ul = document.querySelector('ul'); const new_ul = ul.cloneNode(true); div.appendChild(new_ul); 执行下面的代码，删除指定节点。 JavaScript 1 2 3 const ul = document.querySelector('ul'); ul.removeChild(ul.children[0]); "},"docs/事件监听.html":{"url":"docs/事件监听.html","title":"事件监听","keywords":"","body":"事件监听 执行下面的代码，监听元素的点击事件。 JavaScript Click const btn = document.querySelector('button'); btn.addEventListener('click', function() { console.log('Hello World!'); }); 还可以为同一个元素绑定多个相同类型的监听事件。 JavaScript Click const btn = document.querySelector('button'); btn.addEventListener('click', function() { console.log('Hello World!'); }); btn.addEventListener('click', function() { console.log('Hello JavaScript!'); }); 执行下面的代码，监听元素的鼠标移动事件。 JavaScript .box { width: 500px; height: 500px; background-color: red; } Hello World! const box = document.querySelector('.box'); box.addEventListener('mouseenter', function() { console.log('enter'); }); box.addEventListener('mouseleave', function() { console.log('leave'); }); 执行下面的代码，监听表单的输入操作事件。 JavaScript const input = document.querySelector('input'); input.addEventListener('keydown', function() { console.log('down'); }); input.addEventListener('keyup', function(e) { console.log('up'); console.log(e.key); }); 事件冒泡是指当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。 JavaScript Hello World! const box1 = document.querySelector('.box1'); box1.addEventListener('click', function() { console.log('box1'); }); const box2 = document.querySelector('.box2'); box2.addEventListener('click', function() { console.log('box2'); }); const box3 = document.querySelector('.box3'); box3.addEventListener('click', function() { console.log('box3'); }); 执行下面的代码，阻止冒泡事件。 JavaScript Hello World! const box1 = document.querySelector('.box1'); box1.addEventListener('click', function() { console.log('box1'); }); const box2 = document.querySelector('.box2'); box2.addEventListener('click', function() { console.log('box2'); }); const box3 = document.querySelector('.box3'); box3.addEventListener('click', function(e) { console.log('box3'); e.stopPropagation(); }); 执行下面的代码，利用事件冒泡实现事件委托。 JavaScript 1 2 3 Hello World! const ul = document.querySelector('ul'); ul.addEventListener('click', function(e) { if (e.target.tagName === 'LI') { e.target.style.color = 'red'; } }); 执行下面的代码，阻止元素的默认行为。 JavaScript Click const form = document.querySelector('form'); form.addEventListener('submit', function(e) { e.preventDefault(); }); const a = document.querySelector('a'); a.addEventListener('click', function(e) { e.preventDefault(); }); 执行下面的代码，监听页面加载事件。 JavaScript window.addEventListener('load', function() { console.log('Hello JavaScript!'); }); document.addEventListener('DOMContentLoaded', function() { console.log('Hello World!'); }); 执行下面的代码，监听页面滚动事件。 JavaScript .box { height: 5000px; } window.addEventListener('scroll', function() { console.log('scroll'); }); 执行下面的代码，监听窗口尺寸改变事件。 JavaScript window.addEventListener('resize', function() { console.log('resize'); }); 执行下面的代码，监听移动端事件。 JavaScript document.addEventListener('touchstart', function() { console.log('touchstart'); }); document.addEventListener('touchmove', function() { console.log('touchmove'); }); document.addEventListener('touchend', function() { console.log('touchend'); }); 执行下面的代码，解绑元素的监听事件。 JavaScript Click function func() { console.log('Hello World!'); } const btn = document.querySelector('button'); btn.addEventListener('click', func); btn.removeEventListener('click', func); "},"docs/本地存储.html":{"url":"docs/本地存储.html","title":"本地存储","keywords":"","body":"本地存储 使用本地存储功能可以将数据存储到用户浏览器中。 localStorage.setItem('name', 'Tom'); localStorage.setItem('age', 20); console.log(localStorage.getItem('name')); console.log(localStorage.getItem('age')); 存储复杂数据类型时，需要将数据转换为 JSON 字符串形式。 let obj = { name: 'Tom', age: 20 } localStorage.setItem('obj', JSON.stringify(obj)); console.log(localStorage.getItem('obj')); console.log(JSON.parse(localStorage.getItem('obj'))); "},"docs/会话存储.html":{"url":"docs/会话存储.html","title":"会话存储","keywords":"","body":"会话存储 会话存储仅在当前标签页打开有效，关闭即销毁。 sessionStorage.setItem('name', 'Tom'); sessionStorage.setItem('age', 20); console.log(sessionStorage.getItem('name')); console.log(sessionStorage.getItem('age')); 存储复杂数据类型时，需要将数据转换为 JSON 字符串形式。 let obj = { name: 'Tom', age: 20 } sessionStorage.setItem('obj', JSON.stringify(obj)); console.log(sessionStorage.getItem('obj')); console.log(JSON.parse(sessionStorage.getItem('obj'))); "}}