持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第26天，点击查看活动详情
5. 阻止事件冒泡
标准写法：利用事件对象里面的 stopPropagation()方法
e.stopPropagation()
6. 事件委托
事件委托也称为事件代理,通俗的讲就是不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。
事件委托的原理
给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。
事件委托的作用
- 只操作了一次 DOM ，提高了程序的性能。
- 动态新创建的子元素，也拥有事件。 事件委托的案例可以查看之前写的这篇文章《js事件委托的简单理解与运用》
7. 鼠标事件
| 鼠标事件 | 说明 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover、onmouseenter | 鼠标移入触发 |
| onmouseout、onmouseleave | 鼠标移出触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
注： 如果鼠标移入事件使用onmouseover，经过它的子元素也会触发该事件，使用 onmouseevent替代，onmouseevent只会在鼠标移入当前元素的时候才会触发。 onmouseout使用onmouseleave（移出）替代
- 禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
- 禁止鼠标选中（selectstart 开始选中）
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
鼠标事件对象
| 鼠标事件对象 | 说明 |
|---|---|
| e.clientX | 返回鼠标相对于浏览器窗口可视区的 X坐标 |
| e.clientY | 返回鼠标相对于浏览器窗口可视区的Y坐标 |
| e.pageX | 返回鼠标相对于文档页面的 X坐标 |
| e.pageY | 返回鼠标相对于文档页面的Y坐标 |
| e.screenX | 返回鼠标相对于电脑屏幕的X坐标 |
| e.screenY | 返回鼠标相对于电脑屏幕的Y坐标 |
8. 键盘事件
| 键盘事件 | 触发条件 |
|---|---|
| onkeyup | 某个键盘按键被松开触发 |
| onkeydown | 某个键盘按键被按下时触发 |
| onkeypress | 某个键盘按键被按下时触发，但是不识别功能键 (比如ctrl、shift等) |
<script>
// 常用的键盘事件
//1. keyup 按键弹起的时候触发
document.addEventListener('keyup', function() {
console.log('我弹起了');
})
//3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keypress', function() {
console.log('我按下了press');
})
//2. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keydown', function() {
console.log('我按下了down');
})
// 4. 三个事件的执行顺序 keydown -- keypress -- keyup
</script>
键盘事件对象
keyCode属性 ： 返回该键的 ASCll 值
注意：
onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写
keyCode 属性能区分大小写，返回不同的 ASCll 值
使用keyCode属性判断用户按下哪个键
<script>
// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
document.addEventListener('keyup', function(e) {
console.log('up:' + e.keyCode);
// 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
if (e.keyCode === 65) {
alert('您按下的a键');
} else {
alert('您没有按下a键')
}
})
document.addEventListener('keypress', function(e) {
console.log('press:' + e.keyCode);
})
</script>
