一、事件类型
1.鼠标事件
| 事件类型 | 事件描述 |
|---|---|
| dblclick | 双击鼠标左键时发生，如果右键也按下则不会发生 |
| mousedown | 单击任意一个鼠标按钮时发生 |
| mouseup | 松开任意一个鼠标按钮时发生 |
| mouseout | 鼠标指针位于某个元素上且将要移出元素的边界时发生 |
| mouseover | 鼠标指针移出某个元素到另一个元素上时发生 |
| click | 单击鼠标左键时发生，如果右键也按下则不会发生。当用户的焦点在按钮上并按了 Enter 键时，同样会触发这个事件 |
| mouseleave | 指点设备（通常是鼠标）的指针移出某个元素时，会触发mouseleave事件。 |
| mouseenter | 当定点设备（通常指鼠标）移动到元素上时就会触发 mouseenter 事件 |
| mousemove | 鼠标在某个元素上时持续发生 |
注意：
1.mouseenter/mouseleave不会冒泡， mouseover/mouseout会冒泡，其它相同
2.点击鼠标动作事件执行顺序：mousedown–>mouseup–>click
补充：
移动端：touchstart–touchmove–touchend
2.键盘事件
-
window body button input textarea 都是可聚焦的，可聚焦的元素才能设置键盘事件。
window和body设置键盘事件后，点击浏览器窗口会直接响应事件
button input textarea 在得到焦点状态情况下才会响应键盘事件 -
div等不可聚焦元素设置tabindex属性后就会变成可聚焦的。
- tabindex=负值 (通常是tabindex=“-1”)，
- 表示元素是可聚焦的，但是不能通过键盘导航来访问到该元素
- tabindex=“0” ，
- 表示元素是可聚焦的，并且可以通过键盘导航来聚焦到该元素，它的相对顺序是当前处于的DOM结构来决定的。
- tabindex=正值，
- 表示元素是可聚焦的，并且可以通过键盘导航来访问到该元素；它的相对顺序按照tabindex 的数值递增而滞后获焦。
- 如果多个元素拥有相同的 tabindex，它们的相对顺序按照他们在当前DOM中的先后顺序决定。
tabindex的最大值不应超过32767。
3.具体事件
3.1 keydown：在键盘上按下某个键时触发。 如果按住某个键不放开，会不断触发该事件，但是 Opera 浏览器不支持这种连续操作。
3.2 keypress：在键盘上按下某个键时触发。 如果按住某个键不放开，会不断触发该事件。
3.3 keyup：释放某个键盘键时触发。
三个事件执行顺序 keydown–>keypress–>keyup
3.4 keydown和 keypress的区别
- keydown可以获取特殊键盘的事件(除Fn)，对于字母按键，大小写情况下按键对应值都一样。
- keypress只可以响应字符类键盘按键
4.如何获取相应按键的值
每个事件处理函数内都有一个event事件对象，这个事件对象内有很多相关信息，在键盘事件的处理函数内就有key这个属性表示被点击的键盘值
(在函数内使用event.key获得相应键盘值)
<style>
div {
width: 200px;
height: 200px;
position: fixed;
background-image: url("../img/nvsheng.png");
top:0;
left: 0;
}
</style>
<body>
<div></div>
</body>
<script>
//方向键控制图片移动
let div = document.querySelector("div");
window.onkeydown = move;
let mytop = 0;
let myleft = 0;
function move() {
console.log("move");
let key = event.key;
let step = 10;
if(key=="ArrowUp") {//上
mytop-=step;
div.style.top = mytop+"px";
}else if(key=="ArrowDown") {//下
mytop+=step;
div.style.top = mytop+"px";
}else if(key=="ArrowLeft") {//左
myleft-=step;
div.style.left = myleft+"px";
}else if(key=="ArrowRight") {//右
myleft+=step;
div.style.left = myleft+"px";
}
}
</script>
3.输入框操作事件
| 属性 | 描述 |
|---|---|
| blur | 可聚焦元素失去焦点时触发（设置了tabindex的div也是可聚焦元素） |
| change | 表单元素中值发生变化并且处焦点状态的前提下，失去焦点或按Enter时触发 |
| focus | 可聚焦元素获取焦点时触发 |
| input | 可编辑元素获取用户输入时触发（contenteditable="true"的div也是可编辑元素） |
| reset | 表单重置时触发 |
| search | 设置了 type=“search” 的input或textarea在焦点状态下按Enter时触发如：input type=“search” id=“input1” |
| select | 在input或textarea中选取文本时触发.(获取选取文本：window.getSelection().toString() ) |
| submit | 表单提交时触发 |
注意：
1.focus和blur事件：可以用于: input、textarea, 以及设置了contenteditable="true"的div、span、p、td等
2.change事件：可以用于:所有的表单元素 input、textarea、单选框、复选框、下拉框…,
input和textarea标签的change事件触发的条件：内容有改变后再失去焦点或按Enter。
3.input事件：可以使用this.value动态的监听输入框输入的值
4.search事件：可以用于搜索框
5.select事件：可以通过window.getSelection().toString()得到选取的文本值
4.window窗体事件
1、scroll
scroll：常用于绑定在window对象上, 滚动鼠标时触发
2、load
load：等待网页资源下载完毕再执行
window.onload 网页数据加载完毕后触发的事件
5.img的load事件
<body>
<div id="mydiv">
下面是图片img<br />
</div>
<script>
window.onload = function() {
let mydiv = document.getElementById("mydiv");
let myimg = document.createElement("img");
myimg.src="../img/a.png";
mydiv.appendChild(myimg);
//监听img对文件的加载完毕事件
myimg.onload=function() {
console.log(myimg.width, myimg.height);
}
}
</script>
</body>
6.重点问题
(1)window onload事件和img或者其他媒体资源的onload加载事件的区别
答：img.onload 图片节点加载完毕不会调用 要资源加载完毕就会调用
window.onload：等待页面所有资源下载完成才执行,包括图片资源的下载，所以它是最慢的
(2) 网页加载顺序：
答：url–>下载页面–>domTree，cssTree并行–>渲染树renderTree–>绘制页面–>继续下载图片资源
(3)每年都考的面试题: 用户从地址栏输入网址按下回车到页面展示出来 整个过程发生了什么?
答: 前端=>网络=>后端=>网络=>前端 这4步都得分析
1.用户将url（例如www.baidu.com）输入至地址栏并回车后，首先浏览器会开启一个线程来处理这个请求，对URL判断如果是http协议就按照web方式处理；
2.然后浏览会先从搜索自身的DNS（Domain Name System，域名系统）缓存开始，一级一级往上搜索。
3.如果上述过程，在任一一个缓存中找到，那么便直接在屏幕中显示页面内容；如果都没找到的话，浏览器会发起一个DNS的一个系统调用，就是向本地主控DNS服务器（一般来说是你宽带运营商提供的服务器）发起一个域名解析请求；
4.通过DNS服务器解析后获得了网址的IP地址后，浏览器向域名对应的IP地址服务器发起TCP连接，即发起HTTP“三次握手”
5.TCP/IP连接建立起来以后，浏览器就可以向服务器发送HTTP请求了；（例如GET请求一个根域里的一个域名地址，www.baidu.com）
6.服务器端接受到了这个请求后，根据路径参数，经过后端的一些处理之后，把处理后的结果返回给浏览器
7.浏览器拿到了完整的HTML页面代码或者其他的数据结果后，浏览器开始下载HTML文档，同时设置缓存并关闭TCP连接。
8.浏览器根据拿到的资源对页面进行渲染，最终把一个完整的页面呈现给用户。
即浏览器对整个HTML结构进行解析，形成DOM树，同时对相应的CSS文件进行解析，形成CSS树，然后结合DOM树和CSS树形成一个绘制树。得到绘制树后，需要计算每个节点在页面中的位置，这个过程称为layout（布局）。layout的过程是在一个连续的二维平面上进行的，接下来，需要将这些结果栅格化，映射到屏幕的离散二维平面上，这一过程称为paint（着色）。现代浏览器为提升性能，将页面划分多个 layer，各自进行 paint 然后组合成一个页面（composite layers））
原文博客链接
1512
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
