09-JavaScript事件（下）

1. 阻止事件冒泡

1.1 阻止事件冒泡的两种方式

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点
阻止事件冒泡
标准写法：利用事件对象的 stoppropagation() 方法 e.stopPropagation()
非标准写法：ie678 利用事件对象 cancelBubble属性 e.cancelBubble = true;

1.2 阻止事件冒泡的兼容性解决方案

if(e && e.stopPropagation){
    e.stopPropagation();
}else {
    window.event.cancelBubble = true;
}

2. 事件委托（代理、委派）

事件委托
事件委托也称为事件代理，在JQUERY中称为事件委派

事件委托的原理
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

事件委托的作用
只操作了一次dom ,提高了程序的性能

3. 常用的鼠标事件

3.1 常用的鼠标事件

鼠标事件触发	条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

1. 禁止鼠标右键菜单

document.addEventListener('contextmenu', function(e) {
            e.defaultPrevented();  // 禁用
        })

2.禁止鼠标选中（selectstart 开始选中）

document.addEventListener('selectstart', function(e) {
            e.defaultPrevented();
        })

3.2 鼠标事件对象

event 对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段主要用鼠标事件对象 Mouseevent 和键盘事件对象 Keyboardevent

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的 X 坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的 Y 坐标
e.pageX	返回鼠标相对于文档网页的X 坐标 ie9+支持
e.pageY	返回鼠标相对于文档网页的Y 坐标 ie9+支持
e.screenX	返回鼠标相对于电脑屏幕的 X 坐标
e.screenY	返回鼠标相对于电脑屏幕的 Y 坐标

4. 常用的键盘事件

4.1 常用键盘事件

键盘事件触发	条件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下时触发 它不识别功能键 ctrl shift 等

注意：

1. 如果使用 addEventListener 不需要加 on
2. onkeypress 和前面两个的区别时，它不识别功能键
3. 三个事件的执行顺序是：keydown -> keypress -> keyup

4.2 键盘事件对象

键盘事件对象属性	说明
keyCode	返回该键的ASCII码值

注意：
1. onkeydown 和 onkeyup 不区分大小写，onkeypress 区分大小写
2. 实际开发中，更多的使用 keydown 和 keyup ，它能识别所有的键（包括功能键）
3. keypress 不识别功能键，但是KeyCode 属性能区分大小写，返回不同的ASCII值