JS-第十九天-事件（一）
一、事件基础概念
1.1 事件三要素
事件源：触发事件的元素
事件类型：事件的种类（如click、mouseover等）
事件处理程序：响应事件的函数
1.2 事件流机制
事件传播分为三个阶段：
捕获阶段：事件从顶层开始，经过所有祖先节点，直至触发目标节点
目标阶段：事件到达目标节点并触发
冒泡阶段：事件从目标节点开始，经过所有祖先节点，直至顶层Window对象
二、事件绑定方式
2.1 三种绑定方法对比
方法 | 语法 | 添加数量 | 移除方式 | 特点 |
|---|---|---|---|---|
| HTML行内 | onclick="console.log('点击')" | 1个 | 直接删除属性 | 简单但耦合度高 |
| DOM属性 | ele.onclick = function(){} | 1个 | ele.onclick = null | 简单，但只能绑定一个 |
| addEventListener | ele.addEventListener(event, fn, options) | 多个 | removeEventListener() | 推荐，功能最强大 |
2.2 推荐使用 addEventListener
// 添加事件监听器
element.addEventListener('click', function(event) {console.log('点击事件');
}, false);
// 移除事件监听器
element.removeEventListener('click', handlerFunction);三、常用事件类型
3.1 鼠标事件
click - 单击
dblclick - 双击
contextmenu - 右键菜单
mouseover/mouseout - 鼠标移入/移出（会冒泡）
mouseenter/mouseleave - 鼠标进入/离开（不冒泡）
mousedown/mouseup - 鼠标按下/释放
mousemove - 鼠标移动
重要区别：
mouseenter/mouseleave不会冒泡，不受子元素影响；mouseover/mouseout会冒泡，受子元素影响。
<script>// click 鼠标点击// dblclick 鼠标双击document.ondblclick = function () {console.log('鼠标双击');}// contextmenu 右击菜单document.oncontextmenu = function () {console.log('右键');document.oncontextmenu('.right').style.display = 'block'// 事件原本的功能【阻止默认行为】event.preventDefault()}// mouseover/mouseout 鼠标移入/移出（会冒泡）document.querySelector('.box').onmouseover = function () {console.log('over鼠标滑上去');}document.querySelector('.box').onmouseout = function () {console.log('out鼠标滑出去');}// mouseenter/mouseleave 鼠标移入/移出（不会冒泡）document.querySelector('.box').onmouseenter = function () {console.log('enter鼠标滑走');}document.querySelector('.box').onmouseleave = function () {console.log('leave鼠标滑离开');}// mousedown/mouseup 鼠标按下/释放document.querySelector('.box').onmousedown = function () {console.log('down鼠标按下');}document.querySelector('.box').onmouseup = function () {console.log('up鼠标释放');}// mousemove 鼠标移动document.querySelector('.box').onmousemove = function () {console.log('move鼠标移动');}</script>3.2 键盘事件
keydown - 键盘按下
keyup - 键盘弹起
keypress - 按到有效字符
// keydown 键盘按下document.onkeydown = function () {console.log('down')}// keyup 键盘弹起document.onkeyup = function () {console.log('keyup')}// keypress 按到有效字符document.onkeypress = function (e) {//函数有个参数代表事件的对象console.log('press')console.log(e.key)console.log(e.keyCode)}3.3 表单事件
submit - 表单提交
focus/blur - 获得/失去焦点
change - 值发生改变
input - 输入事件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.tip {color: darkgreen;}.err {color: red;}</style>
</head><body><!-- 表单 --><form id="form" action="https://www.baidu.com">用户名:<input type="text" name="n"><br>密码:<input type="password" name="p"><br><span class="tip" hidden>请输入密码</span><br><span class="err" hidden>密码不正确</span><br><button id="btn" type="submit">按钮</button></form><script>form.onsubmit = function (e) {e.preventDefault();//阻止提交}// 输入document.querySelector('input')[0].oninput = function () {console.log('输入')}// 获取焦点，失去焦点 focus/blurdocument.querySelectorAll('input')[1].onfocus = function () {document.querySelector('.tip').hidden = falsedocument.querySelector('.err').hidden = true}document.querySelectorAll('input')[1].onblur = function () {document.querySelector('.tip').hidden = truedocument.querySelector('.err').hidden = false}// change 当值发生改变时触发document.querySelectorAll('input')[1].onchange = function () {console.log('变了。')}</script><!-- 以下全部适合用change监听 --><input type="checkbox"><input type="radio"><select name="" id=""></select>
</body></html>