5. 事件
1.1 事件三要素
-
事件源:触发事件的元素
-
事件类型:事件的种类(如click、mouseover等)
-
事件处理程序:响应事件的函数
1.2 事件流机制
事件传播分为三个阶段:
-
捕获阶段:事件从顶层开始,经过所有祖先节点,直至触发目标节点
-
目标阶段:事件到达目标节点并触发
-
冒泡阶段:事件从目标节点开始,经过所有祖先节点,直至顶层Window对象
5.1 添加、移除事件
方法1(最不推荐的写法)
<button onclick="alert('Hi')">按钮1</button>
方法2(添加)
<button class="btn">按钮2</button>
<script>
//添加(方法2)
document.querySelector('.btn').onclick = function () {
alert('Hello')
}
//添加第二个[使用onclick只能添加一个程序]
document.querySelector('.btn').onclick = function () {
alert('Hello22222')
}
// 移除
// document.querySelector('.btn').onclick = null
</script>
方法3(最推荐的语法结构)
<button class="btn3">按钮3</button>
<script>
//方法3(最推荐的语法结构)
// document.querySelector('.btn3').addEventListener(事件类型,事件执行程序)
document.querySelector('.btn3').addEventListener('click', function () {
console.log(123);
})
// 处理程序
function btn3Fn() {
console.log('第二个函数');
}
// addEventListener 可以添加多个程序
document.querySelector('.btn3').addEventListener('click', btn3Fn)
//也可以移除,指定移除哪一个程序
document.querySelector('.btn3').removeEventListener('click', btn3Fn)
</script>
5.2 事件类型
1. 鼠标事件
-
click - 单击
-
dblclick - 双击
document.ondblclick = function () {
console.log('双击');
}
-
contextmenu - 右键菜单
document.oncontextmenu = function (event) {
console.log('右键');
document.querySelector('.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.onmousedown = function () {
console.log('down点下鼠标');
}
document.onmouseup = function () { console.log('up松开鼠标'); }
-
mousemove - 鼠标移动
document.onmousemove = function () {
console.log("move鼠标移动");
}
重要区别:
mouseenter/mouseleave
不会冒泡,不受子元素影响;mouseover/mouseout
会冒泡,受子元素影响。
2. 键盘事件
-
keydown - 键盘按下
// • keydown - 键盘按下
document.onkeydown = function () {
console.log('down');
}
-
keyup - 键盘弹起
// • keyup - 键盘弹起
document.onkeyup = function () {
console.log('keyup');
}
-
keypress - 按到有效字符
// keypress - 按到有效字符
document.onkeypress = function (e) {//函数有个参数代表事件的对象
// console.log("press");
console.log(e.key);
console.log(e.keyCode);
}
3. 表单事件
<!-- 表单 -->
<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>
-
submit - 表单提交
// submit 提交
form.onsubmit = function (e) {
e.preventDefault();//阻止提交
}
-
focus/blur - 获得/失去焦点
// 获取焦点,失去焦点 focus/blur
document.querySelectorAll('input')[1].onfocus = function () {
document.querySelector('.tip').hidden = false
document.querySelector('.err').hidden = true
}
document.querySelectorAll('input')[1].onblur = function () {
document.querySelector('.tip').hidden = true
document.querySelector('.err').hidden = false
}
-
change - 值发生改变
// change 当值发生改变的时候触发
document.querySelectorAll('input')[1].onchange = function () {
console.log('变了。');
}
-
input - 输入事件
// 输入
document.querySelectorAll('input')[0].oninput = function () {
console.log('输入');
}