javaEE -18（11000字 JavaScript入门 - 3）

一：事件 （高级）

1.1 注册事件（绑定事件）

给元素添加事件，称为注册事件或者绑定事件，注册事件有两种方式：传统方式和方法监听注册方式

传统注册方式 ：

• 利用 on 开头的事件 onclick
• < button οnclick=“alert(‘hi~’)”>< /button >
• btn.onclick = function() {}
• 特点： 注册事件的唯一性
• 同一个元素同一个事件只能设置一个处理函数
• 最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式：

• w3c 标准 推荐方式
• addEventListener() 它是一个方法
• 特点：同一个元素同一个事件可以注册多个监听器
• 按注册顺序依次执行

1.1.1 addEventListener 事件监听方式

eventTarget.addEventListener(type, listener[, useCapture])

eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

该方法接收三个参数：

• type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 on
• listener：事件处理函数，事件发生时，会调用该监听函数
• useCapture：可选参数，是一个布尔值，默认是 false。学完 DOM 事件流后，我们再进一步学习

下面是一个代码例子：

const button = document.querySelector('button');button.addEventListener('click', () => {console.log('第一个事件被触发！');
});button.addEventListener('mouseover', () => {console.log('第二个事件被触发！');
});

我们使用addEventListener方法分别给该按钮注册了两个事件监听器。当按钮被点击时，第一个事件监听器会显示 “第一个事件被触发！” 的消息在控制台上。而当鼠标悬停在按钮上时，第二个事件监听器会显示 “第二个事件被触发！” 的消息在控制台上。

1.2 删除事件（解绑事件）

删除事件的方式同样也有两种：

1. 传统注册方式

eventTarget.onclick = null;

2. 方法监听注册方式

eventTarget.removeEventListener(type, listener[, useCapture]);

它接受三个参数：事件类型（type）、要移除的事件监听器函数（listener）和一个可选的布尔值（useCapture），指定事件是否在捕获阶段进行处理。

const button = document.getElementById('myButton');function handleClick() {console.log('Button clicked!');
}button.addEventListener('click', handleClick);// 等待一段时间后移除事件监听器
setTimeout(() => {button.removeEventListener('click', handleClick);
}, 3000);

1.3 DOM事件流

事件流描述的是从页面中接收事件的顺序，事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。

比如我们给一个div 注册了点击事件：

DOM 事件流分为3个阶段：

1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段

• 事件冒泡： IE 最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点的过程。
• 事件捕获： 网景最早提出，由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。

我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（ 最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。

注意：

1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
2. onclick 和 attachEvent 只能得到冒泡阶段。
3. addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
4. 实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
5. 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
6. 事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件，我们后面讲解。

1.4 事件对象

eventTarget.onclick = function(event) {}
eventTarget.addEventListener('click', function(event) {}）
// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt

这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去。当我们注册事件时， event 对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）。

官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。

简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。

比如：

1. 谁绑定了这个事件。
2. 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
3. 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。

以下是一些常见的事件对象属性和方法：

1. event.type：返回事件的类型。
2. event.target或event.srcElement：返回触发事件的元素。
3. event.clientX和event.clientY：返回鼠标事件发生时的 X 和 Y 坐标。
4. event.keyCode和event.key：返回键盘事件中按下的键的键码或键值。
5. event.preventDefault()：阻止事件的默认行为。
6. event.stopPropagation()：停止事件在DOM树中的传播。

通过访问事件对象，我们可以在事件发生时获取相关的信息，并在事件处理函数中进行相应的操作。

target 和 this 的区别：

• this 是事件绑定的元素， 这个函数的调用者（绑定这个事件的元素）
• e.target 是事件触发的元素。

1.5 阻止事件冒泡

事件冒泡本身的特性，会带来的坏处，也会带来的好处，所以我们有时候需要阻止冒泡。

e.stopPropagation()

我们通过 stopPropagation() 方法即可阻止冒泡

以下是一个示例，展示如何使用e.stopPropagation()阻止冒泡：

const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');// 子元素点击事件处理程序
childElement.addEventListener('click', (e) => {e.stopPropagation();console.log('点击了子元素');
});// 父元素点击事件处理程序
parentElement.addEventListener('click', () => {console.log('点击了父元素');
});// 输出：
// 点击了子元素

在上面的示例中，当点击子元素时，子元素的点击事件处理程序执行，并通过e.stopPropagation()阻止了事件冒泡到父元素，所以父元素的点击事件处理程序不会被触发。

请注意，e.stopPropagation()只会阻止事件在当前元素的后代元素中继续冒泡，而不会阻止事件在当前元素之外的其他元素上的冒泡。

1.6 事件委托（代理、委派）

事件委托也称为事件代理， 在 jQuery 里面称为事件委派。

事件冒泡本身的特性，会带来的坏处，也会带来的好处，下面我们来讲讲他的好处。

下面通过一个例子讲解：

<ul>
<li>知否知否，应该有弹框在手</li>
<li>知否知否，应该有弹框在手</li>
<li>知否知否，应该有弹框在手</li>
<li>知否知否，应该有弹框在手</li>
<li>知否知否，应该有弹框在手</li>
</ul>

我们需要点击每个 li 都会弹出对话框，以前需要给每个 li 注册事件，是非常辛苦的，而且访问 DOM 的次数越多，这就会延长整个页面的交互就绪时间。

事件委托的原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

在上述例子中，我们可以给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上，ul 有注册事件，就会触发事件监听器，并且我们只操作了一次 DOM ，提高了程序的性能。

1.7 常用的鼠标事件

1. 禁止鼠标右键菜单

document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})

contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

2. 禁止鼠标选中（selectstart 开始选中）

document.addEventListener('selectstart', function(e) {
e.preventDefault();
})

鼠标事件对象MouseEvent 的常用方法：

1.8 常用的键盘事件

事件除了使用鼠标触发，还可以使用键盘触发， 注意给文档 document 添加键盘事件

注意：

• onkeypress 和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等。
• onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。

键盘事件对象 KeyboardEvent 的常用方法：

二： BOM 浏览器对象模型

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window，BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。

对于 DOM ：

• 文档对象模型
• DOM 就是把文档当做一个对象来看待
• DOM 的顶级对象是 document
• DOM 主要学习的是操作页面元素
• DOM 是 W3C 标准规范

对于 BOM ：

• 浏览器对象模型
• 把浏览器当做一个对象来看待
• BOM 的顶级对象是 window
• BOM 学习的是浏览器窗口交互的一些对象
• BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差

BOM 比 DOM 更大，它包含 DOM。

注意： window 对象是浏览器的顶级对象，定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt() 等。

2.1 window 对象的常见事件

2.1.1 窗口加载事件

2.1.1.1 load

window.onload = function(){}
或者
window.addEventListener("load",function(){});

window.onload 是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等), 就调用的处理函数。

1. 有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，再去执行处理函数。
2. window.onload 传统注册事件方式 只能写一次，如果有多个，会以最后一个window.onload 为准。
3. 如果使用 addEventListener 则没有限制

2.1.1.2 DOMContentLoaded

document.addEventListener('DOMContentLoaded',function(){})

DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。

如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。

2.1.2 调整窗口大小事件

window.onresize = function(){}
window.addEventListener("resize",function(){});

window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。

注意：

1. 只要窗口大小发生像素变化，就会触发这个事件。
2. 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度

2.2 定时器

window 对象给我们提供了 2 个非常好用的方法-定时器。

1. setTimeout()
2. setInterval()

2.2.1 setTimeout() 定时器

window.setTimeout(调用函数, [延迟的毫秒数]);

setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。

举个例子：

function sayHello() {console.log('Hello, world!');
}window.setTimeout(sayHello, 2000);

通过定时器，sayHello函数将在2秒后被调用，我们会延迟两秒在控制台输出“Hello, world!”。

注意：

1. window 可以省略。
2. 延迟的毫秒数省略默认是 0，如果写，必须是毫秒。
3. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

setTimeout() 这个调用函数我们也称为回调函数 callback，普通函数是按照代码顺序直接调用，而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。

简单理解： 回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。

以前我们讲的 element.onclick = function(){} 或者 element.addEventListener(“click”, fn); 里面的 函数也是回调函数。

2.2.2 停止 setTimeout() 定时器

window.clearTimeout(timeoutID)

clearTimeout()方法取消了先前通过调用 setTimeout() 建立的定时器。

举个例子：

const delayedFunction = () => {console.log('Delayed function called!');
};// 创建定时器，延迟 2 秒后调用 delayedFunction
const timeoutID = window.setTimeout(delayedFunction, 2000);// 取消定时器
window.clearTimeout(timeoutID);

在上面的代码中，首先我们使用window.setTimeout()方法创建了一个定时器，将delayedFunction作为回调函数，并指定了延迟时间为 2000 毫秒（即 2 秒）。window.setTimeout()返回一个定时器的 ID，我们将其保存在timeoutID变量中。

最后，通过调用window.clearTimeout(timeoutID)方法，我们取消了之前创建的定时器，这样，定时器将不再触发，并且delayedFunction不会被调用。

注意：

1. window 可以省略。
2. 里面的参数就是定时器的标识符 。

2.2.3 setInterval() 定时器

window.setInterval(回调函数, [间隔的毫秒数]);

setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。

举个例子：

function 每秒执行的函数() {console.log("每秒执行一次");
}// 用 setInterval() 调用每秒执行的函数，间隔为 1000 毫秒（即 1 秒）
window.setInterval(每秒执行的函数, 1000);

我们定义了一个函数 每秒执行的函数()，它在控制台中打印一条消息。然后，我使用 window.setInterval() 方法每隔 1000 毫秒（1 秒）调用此函数。

注意：

1. window 可以省略。
2. 间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。
3. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
4. 第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。

2.2.4 停止 setInterval() 定时器

window.clearInterval(intervalID);

clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。

注意：

1. window 可以省略。
2. 里面的参数就是定时器的标识符 。

2.2.5 this 的指向

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象

1. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）：

function greet() {console.log(this); // 在浏览器环境中输出：Window对象
}greet();

2. 方法调用中谁调用this指向谁：

const person = {name: 'John',greet: function() {console.log(this.name); // 在greet方法中的this指向person对象，输出：John}
};person.greet();

3. 构造函数中this指向构造函数的实例：

function Person(name) {this.name = name;
}const john = new Person('John');
console.log(john.name); // 输出：John

2.3 JS 执行机制

首先JS 是单线程，单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是： 如果JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

以下代码执行的结果是什么？为什么？

console.log(1);setTimeout(function () {
console.log(3);
}, 1000);console.log(2);

这段代码的输出结果是：

1
2
3

这是因为setTimeout函数是一个异步函数，它会在一定时间后将回调函数添加到任务队列中，而不会阻塞后续代码的执行。因此，代码会按照顺序执行console.log(1)，然后执行setTimeout函数，将回调函数添加到任务队列中。然后立即执行console.log(2)。最后，当定时器计时结束后（即过了1000毫秒），事件循环会将回调函数放到调用栈中执行，所以会输出console.log(3)。

2.3.1 简单理解同步和异步

同步：

• 前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。

异步：

• 你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。

2.3.2 同步任务和异步任务

同步任务：

• 同步任务都在主线程上执行，形成一个执行栈。

异步任务：

• 普通事件，如 click、resize 等
• 资源加载，如 load、error 等
• 定时器，包括 setInterval、setTimeout 等

异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）。

2.3.3 JS 执行机制

1. 先执行执行栈中的同步任务。
2. 异步任务（回调函数）放入任务队列中。
3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop）。

2.4 location 对象

window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL，并且可以用于解析 URL 。 因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。

2.4.1 URL

URL即统一资源定位符 (Uniform Resource Locator, URL) 是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

URL 的一般语法格式为：

protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

2.4.2 location 对象的属性和方法

2.5 navigator 对象

navigator对象是JavaScript中的一个内置对象，提供了与浏览器相关的信息。它包含了有关浏览器和设备的信息，可用于检测浏览器的功能和特性，并根据不同的浏览器环境进行相应的操作。

下面是一些常用的属性和方法：

1. userAgent：返回浏览器的用户代理字符串，该字符串包含了有关浏览器的详细信息，如浏览器名称、版本号、操作系统等。例如：

console.log(navigator.userAgent);

2. appName：返回浏览器的名称。常见的值有 “Netscape”、“Microsoft Internet Explorer”、“Chrome”、“Firefox” 等。

3. appVersion：返回浏览器的版本号。

4. platform：返回浏览器运行的平台，如 “Win32”、“Win64”、“MacIntel” 等。

5. language：返回浏览器的首选语言，通常是由操作系统或者浏览器设置的。

6. cookiesEnabled：返回一个布尔值，表示浏览器是否启用了Cookie。

7. geolocation：一个Geolocation对象，用于获取用户的地理位置信息。

8. userAgentData：一个UserAgentData对象，提供有关浏览器的更详细信息，如品牌、版本号、移动设备类型等。

9. registerProtocolHandler()：向浏览器注册自定义的协议处理程序。

10. javaEnabled()：返回一个布尔值，表示浏览器是否启用了Java。

2.6 history 对象

window 对象给我们提供了一个 history 对象，与浏览器历史记录进行交互。该对象包含
用户（在浏览器窗口中）访问过的 URL。

三： PC 端网页特效

3.1 元素偏移量 offset 系列

offset 翻译过来就是偏移量， 我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

• 获得元素距离带有定位父元素的位置
• 获得元素自身的大小（宽度高度）
• offset返回的数值都不带单位

offset 系列常用属性：

3.1.1 offset 与 style 区别

offset：

• offset 可以得到任意样式表中的样式值
• offset 系列获得的数值是没有单位的
• offsetWidth 包含padding+border+width
• offsetWidth 等属性是只读属性，只能获取不能赋值
• 所以，我们想要获取元素大小位置，用offset更合适

style：

• style 只能得到行内样式表中的样式值
• style.width 获得的是带有单位的字符串
• style.width 获得不包含padding和border 的值
• style.width 是可读写属性，可以获取也可以赋值
• 所以，我们想要给元素更改值，则需要用style改变

3.2 元素可视区 client 系列

client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

3.3 元素滚动 scroll 系列

scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件。

3.4 三大系列总结

1. offset系列 经常用于获得元素位置 offsetLeft offsetTop
2. client 经常用于获取元素大小 clientWidth clientHeight
3. scroll 经常用于获取滚动距离 scrollTop scrollLeft
4. 注意页面滚动的距离通过 window.pageXOffset 获得

3.5 mouseenter 和 mouseover

当鼠标移动到元素上时就会触发 mouseenter 事件类似 mouseover，它们两者之间的差别是

• mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。

• mouseenter 只会经过自身盒子触发

之所以这样，就是因为 mouseenter 不会冒泡

跟mouseenter搭配 鼠标离开 mouseleave 同样不会冒泡

3.6 动画函数封装

核心原理：通过定时器 setInterval() 不断移动盒子位置。

实现步骤：

1. 获得盒子当前位置
2. 让盒子在当前位置加上1个移动距离
3. 利用定时器不断重复这个操作
4. 加一个结束定时器的条件
5. 注意此元素需要添加定位，才能使用element.style.left

注意函数需要传递2个参数，动画对象和移动到的距离。

3.6.1 缓动效果原理

缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来

思路：

1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
2. 核心算法： (目标值 - 现在的位置 ) / 10 做为每次移动的距离 步长
3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
4. 注意步长值需要取整

当我们需要让动画函数多个目标值之间移动时，我们需要判断步长是正值还是负值

1. 如果是正值，则步长 往大了取整
2. 如果是负值，则步长 向小了取整

四： 本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。

本地存储的特性：

1. 数据存储在用户浏览器中
2. 设置、读取方便、甚至页面刷新不丢失数据
3. 容量较大，sessionStorage约5M、localStorage约20M
4. 只能存储字符串，可以将对象JSON.stringify() 编码后存储

4.1 window.sessionStorage

1. 生命周期为关闭浏览器窗口
2. 在同一个窗口(页面)下数据可以共享
3. 以键值对的形式存储使用

存储数据：

sessionStorage.setItem(key, value)

获取数据：

sessionStorage.getItem(key)

删除数据：

sessionStorage.removeItem(key)

删除所有数据：

sessionStorage.clear()

4.1 window.localStorage

1. 声明周期永久生效，除非手动删除 否则关闭页面也会存在
2. 可以多窗口（页面）共享（同一浏览器可以共享）
3. 以键值对的形式存储使用

存储数据：

localStorage.setItem(key, value)

获取数据：

localStorage.getItem(key)

删除数据：

localStorage.removeItem(key)

删除所有数据：

localStorage.clear()