这是我参与8月更文挑战的第16天，活动详情查看：8月更文挑战
一、DOM事件
1.1 事件定义
事件：文档（html元素及document）或者浏览器的窗口发生的一些特定的交互瞬间；可以监听这些事件，来实现在事件发生时执行特定的操作；
let btn = document.querySelector('.btn');
let box = document.querySelector('.box');
1.2 常见的事件：
1.2.1 鼠标事件
鼠标动作时触发的事件
- 元素.onclick = function() {} 单击事件
- 元素.ondbclick = function () {} 双击事件
- 元素.onmouseenter = function () {} 鼠标移入
- 元素.onmouseleave = function () {} 鼠标移出
- 元素.onmouseover = function () {} 鼠标滑过
- 元素.onmouseout = function () {} 鼠标划出
- 元素.onmousemove = function () {} 鼠标移动
- 元素.onmousedown = function () {} 鼠标按下
- 元素.onmmouseup = function () {} 鼠标抬起
- 元素.onmousewheel = function () {} 鼠标滚轮滚动
box.onmouseover = function () {
console.log(1111)
};
box.onmouseout = function () {
console.log(2222)
};
box.onmousedown = function () {
console.log('3333')
};
box.onmouseup = function () {
console.log(4444)
};
box.onmousewheel = function () {
console.log(555);
};
1.2.2 键盘事件：
一般 input 、 textarea、 document.body、 document.window、 document.documentElement 监听键盘事件：
- 元素.onkeydown = function() {} 键盘按下
- 元素.onkeyup = function () {} 键盘抬起
let input = document.querySelector('#input');
input.onkeydown = function () {
console.log('123')
};
document.onkeyup = function () {
console.log('keyup')
};
window.onkeydown = function () {
console.log('window key down')
};
1.3 表单元素事件
- onfocus 获取焦点（光标）事件
- onblur 失去焦点时触发
- onchange 事件，表单的值（value）发生改变时触发
- oninput 事件 input、textarea等元素的输入事件
input.onfocus = function () {
console.log('获取焦点')
};
input.onblur = function () {
console.log('失去焦点')
};
input.oninput = function () {
console.log(this.value);
};
- 1.4 系统事件：
- window.onload 页面中所有的资源全部加载完触发
- window.onresize 当前窗口尺寸发生改变时触发
- window.onsroll 滚动条滚动时触发
window.onresize = function () {
console.log('变了、变了');
};
-
1.5 移动端事件` ontouchstart 触摸元素时触发 ontouchend 离开元素时触发 ontouchmove 滑动时触发
-
移动端使用click大概有300ms的延迟
box.ontouchstart = function () {
console.log('start');
};
box.ontouchend = function () {
console.log('end')
};
1.2 事件对象
在事件触发时，浏览器传递给事件函数的实参；其中包含了本次事件触发的具体信息；
let box = document.querySelector('.box');
box.onclick = function (e) {
console.log(e); MouseEvent e一般称为事件对象，
e.clientX 鼠标点击的位置相对于当前浏览器可视窗口的 左偏移值
e.clientY 鼠标点击位置相对于当前浏览器可视窗口的 上偏移值
e.pageX 鼠标点击位置相对于body左边缘的偏移值
e.pageY 鼠标点击位置相对于body上边缘的偏移值
e.target 触发事件的元素（点击事件中是点击的元素）对象，称为事件源
IE事件触发时把事件信息挂载在window.event 这个属性上
};
document.onkeydown = function (e) {
键盘事件 KeyboardEvent
console.log(e);
console.log(e.keyCode);
e.keyCode 键码：键盘上每个键对应一个键码，当keydown事件触发时，
};
1.3 默认事件和默认行为
有些元素时由默认行为的，如a标签点击会跳转。
let baidu = document.getElementById('baidu');
阻止默认行为：
baidu.onclick = function (e) {
alert(111);
e.preventDefault(); 阻止元素的事件默认行为
IE 低版本：e.returnValue = false
return false; return false也可以阻止默认行为
};
1.4 事件传播：
let $ = (selector) => document.querySelector(selector);
let outer = $('.outer');
let inner = $('.inner');
let center = $('.center');
document.onclick = function () {
console.log('document')
};
outer.onclick = function () {
console.log('outer')
};
inner.onclick = function () {
console.log('inner')
};
center.onclick = function (e) {
console.log('center');
e.stopPropagation();
};
- 点击center会触发center的点击事件，同时inner和outer的以及更高层级的元素的点击事件也会被触发。这种现象称为事件的冒泡机制；
事件的触发过程：事件的触发分为两个三个阶段：捕获阶段、目标阶段、冒泡阶段。在事件触发时，浏览器先从最外层的元素开始找，一直找到事件源的过程称为捕获阶段，触发事件源绑定事件后开始向上冒泡，依次触发父级元素的该事件；
-
元素.onXXX = func... 绑定的事件都是DOM0级事件，DOM0级事件都是绑定再冒泡阶段的。
-
取消冒泡：e.stopPropagation()
- IE低版本：e.cancelBubble = true;
- 取消冒泡后，事件不会再向上传播；更高层级的元素的对应事件不会触发；
1.5 onmouseover和mouseenter
let $ = selector => document.querySelector(selector);
let inner = $('.inner');
let outer = $('.outer');
- mouseover
inner.onmouseover = function () {
console.log('inner over');
};
inner.onmouseout = function () {
console.log('inner out')
};
outer.onmouseover = function () {
console.log('outer over')
};
outer.onmouseout = function () {
console.log('outer out')
};
- mouseenter
inner.onmousenter = function () {
console.log('inner enter');
};
inner.onmouseleave = function () {
console.log('inner leave')
};
outer.onmouseenter = function () {
console.log('outer enter')
};
outer.onmouseleave = function () {
console.log('outer leave')
};
- mouseenter & mouseover的区别：
-
over属于划过事件，从父元素进入子元素，属于离开了父元素，会触发父元素的out事件，然后触发子元素的over事件；
-
enter属于进入，从父元素进入子元素，不算离开父元素，不会触发父元素的leave事件；
-
enter和leave是阻止了事件冒泡的，而over和out还存在冒泡传播；
__ 所以对于父子嵌套的这种情况，使用over会触发很多不可控的情况，使用enter更加简单。__
二、 onload和DOMContentLoaded
-
- onload事件：加载成功后执行
-
window.onlaod 是页面中所有的资源（css、js、图片等）全部加载完成后才会触发：
window.onload = function () {
console.log('加载完成了')
};
-
- DOMContentLoaded: 只要页面中的DOM结构加载完成后就可以触发
document.addEventListener('DOMContentLoaded', function () {
console.log('DOM结构加载完成了')
});
- JS是用来操作DOM的，一般需要在DOM加载结束以后再执行JS。
document.addEventListener('DOMContentLoaded', function () {
// 以后经常有人会这样写代码，把js这在这个函数中，表示DOM结构加载完成后再执行
});
三、事件委托
- 页面中有10个li，点击哪个li，就弹出该li的文本内容
let liList = document.querySelectorAll('#list > li');
for (let i = 0; i < liList.length; i++) {
liList[i].onclick = function () {
alert(this.innerText);
}
}
- 利用事件委托：把事件绑定给父级元素或者更高级元素，然后根据e.target事件源作出不同操作；
let list = document.querySelector('#list');
list.onclick = function (e) {
let { target } = e;
// 一般根据事件源的tagName来区分当前点击的是哪个元素
if (target.tagName.toLowerCase() === 'li') {
alert(target.innerText);
}
};
- 循环绑定事件的效率低，而且不适用于动态绑定的数据。
- 事件委托：利用的是事件的冒泡传播机制，给里面的每个子元素绑定相同的事件行为，把事件绑定给他们共同的上级元素，然后利用e.target区分具体触发事件的元素，然后做不同的操作；
