文章目录
1.JS事件类型 - 三大类
1.鼠标类型
click | 单击鼠标 |
---|---|
dbclick | 双击鼠标 |
mousedown | 鼠标被按下未弹起 |
mouseup | 释放鼠标按钮 |
mousemove | 移动鼠标 |
mouseenter | 鼠标首次从元素外部移入元素范围内触发 |
mouseleave | 鼠标移出 |
2.键盘类型事件
keydown | 键盘按下任意字符时触发 => 按住不放,会重复触发 |
---|---|
keyup | 当用户释放键盘上的按钮 |
keypress | 键盘按下任意按键时触发 => 按住不放,会重复触发 |
keydown 与 keypress区别
keydown为按钮的动作回调,即按下按钮后触发;keypress为字符输入的回调,即字符输入后回调
3.HTMl类型
a.内容类
select | 选择文本框(input textarea)中一个或多个字符触发 |
---|---|
change | 选择文本框内容改变且失去焦点 |
input | 输入内容后回调 |
focus | 聚焦后触发 |
blur | 失去焦点后触发 |
b.版面内容型
submit | form元素上提交按钮 |
---|---|
reset | form元素上重置按钮 |
c.窗口型
load | 当前窗口完全加载后 => 触发是在window上 |
---|---|
unload | 当前页面完全卸载后 => 触发是在window上 |
resize | 窗口大小变化时,触发回调 |
scroll | 滚动触发 |
window.load / window.unload
2.事件的传播
1.事件的传播模型:冒泡&捕获
捕获的粒度是 —— 从粗到细(从外到内)
冒泡的粒度是 —— 从细到粗(从内到外)
2.DOM的事件流 - 层级事件的传播上
事件捕获阶段 => 目标触发阶段 => 事件冒泡阶段
问题:冒泡会导致大量底层事件被上层感知从而产生困扰
冒泡阻断 - stopPropagation
3.事件绑定 - DOM0级与DOM2级事件
1.DOM0级事件
直接进行内绑定
<input type="button" id="myButton" value="DOM0"
onclick="console.log('click DOM0 button');">
2.DOM2级事件
利用addEventListener / removeEventListener
target.addEventListener(type, listener[, useCapture])
问题:DOM0 & DOM2优先级问题
DOM2 强度更大,会覆盖DOM0
<html lang="en">
<body>
<button id="clickMe"> click me </button>
<input type="button" id="myButton" value="DOM0"
onclick="console.log('click DOM0 button');">
</body>
</html>
<script>
document.getElementById('myButton').onclick = function() {
console.log('click DOM2 button');
}
</script>
4.事件委托 / 代理
addEventLIstenr(事件类型,事件处理函数,是否捕获[默认false])
问题: 有一个列表,点击每个节点的时候,实现打印节点的内容
<ul id="list">
<li class="item">js</li>
<li class="item">es</li>
<li class="item">ts</li>
<li class="item">react</li>
<li class="item">vue</li>
</ul>
document.addEventListener('DOMContentLoaded', function() {
let app = document.getElementById('list');
let items = app.getElementsByClassName('item');
for(let item of items) {
item.addEventListener('click', function() {
console.log('click item' + item.innerHTML);
})
}
})
DOMContentLoaded 解析:当初始HTML文档已完全加载和解析时,将触发DOMContentLoaded事件,而不需要等待样式表,图像和子框架页面加载(事件可以用来检测HTML页面是否完全加载完毕(fully-loaded))。
问题:如果当前的节点列表非常大,每个节点挂在监听器,效率非常低
document.addEventListener('DOMContentLoaded', function() {
let app = document.getElementById('list');
// 利用dom事件流,先捕获再冒泡
app.addEventlistener('click', function(e) {
if(e.target & e.target.nodeName === 'LI') {
let item = e.target;
console.log('click item' + item.innerHTML);
}
})
})