【慕课网】DOM事件探秘
讲师：Amy 课程：https://www.imooc.com/learn/138
第一章 事件流
1-1 [DOM] 事件冒泡
事件流：描述的是从页面中接受事件的顺序 IE-事件冒泡流：即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接受，然后逐级向上传播至最不具体的节点（文档）。
1-2 [DOM] 事件捕获
Netscape-事件捕获流：不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。
第二章 事件处理程序
2-1 HTML 事件处理程序
例如：
<input type="button" value="按钮" id="btn" onclick="showMes()" />
缺点：HTML 和 JS 代码紧密的耦合在一起;更新函数名时，JS 代码和 HTML 都要进行修改
2-2 DOM0 级事件处理程序
较传统的方式：把一个函数赋值给一个事件的处理程序属性，用的比较多的方法，简单、跨浏览器的优势 例如：
var btn = document.getElementById('btn');
btn.onclick = function(){
alert('这是通过DOM0级添加的事件');
}
btn.onclick = null;//删除事件
没有 HTML 事件处理程序的缺点
2-3 DOM2 级事件处理程序
没有 DOM1 级 DOM2 级定义了两个方法： 用于处理指定和删除事件处理程序的操作 addEventListener()和 removeEventListener()。 所有 DOM 节点包含这两个方法 接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值 例如：
var btn = document.getElementById('btn');
btn.addEventListener('click',showMes,false);//false可以兼容浏览器，冒泡阶段
btn.addEventListener('click',function(){
alert(this.value);
},false);//按钮被点击后，先执行上面的事件，再进行这个事件
btn.removeEventlistener('click',showMes,false);//删除事件，参数必须与添加事件时传的参数相同,且通过addEventListener添加的事件，只能通过removeEventListner删除。
DOM0 级和 DOM2 级可以给一个元素添加多个事件处理程序，按照它们的顺序进行执行。
2-4 IE 事件处理程序及跨浏览器解决
attachEvent()添加事件 detachEvent()删除事件 接收相同的两个参数：事件处理程序的名称和事件处理程序的函数 不适用第三个参数的原因：IE8 以及更早的浏览器版本支支持事件冒泡 例如：
var btn = document.getElementById('btn');
btn.attachEvent('onclick',showMes);//添加事件
btn.detachEvent('onclick',showMes);//删除事件
支持 IE 事件处理程序的浏览器：IE 和 OPERA 跨浏览器解决，用能力检测 例如：
var eventUtil = {
//添加句柄
addHandler:function(element,type,handler){
if(element.addEventListener){//DOM2级别
element.addEventListener(type,handler,false);
}else if(element.attachEvent){//IE
element.attachEvent('on'+type,handler);
}else{//不支持DOM0级和DOM2级
element['on'+type] = handler;//element.onclick===element['onclick']
}
},
//删除句柄
removeHandler:function(element,type,handler){
if(element.addEventListener){//DOM2级别
element.removeEventListener(type,handler,false);
}else if(element.attachEvent){//IE
element.detachEvent('on'+type,handler);
}else{//不支持DOM0级和DOM2级
element['on'+type] = null;//element.onclick===element['onclick']
}
}
}
var btn = document.getElementById('btn');
eventUtil.addHandler(btn,'click',showMes);
eventUtil.removeHandler(btn,'click',showMes);
第三章 事件对象
什么是事件对象？在触发 DOM 上的事件时都会产生一个对象 事件对象 event
3-1 DOM 中的事件对象
重要的属性
- type 属性，用于获取事件类型
- target 属性，用于获取事件目标(target.nodeName，节点名称)
重要的方法
- stopPropagation()方法，用于阻止事件冒泡
- preventDefault()方法，阻止事件的默认行为
<a href="#">超链接</a>//此处，跳转是默认行为
3-2 IE 中的事件对象
- type 属性，用于获取事件类型
- srcElement 属性，用于获取事件目标
window.event 是用于兼容 ie 早期版本的，加上会更严谨
//在showMes(event)函数中
event = event||window.event;
let ele = event.target||event.srcElement;
- cancelBubble 属性，用于阻止事件冒泡，设置为 true 表示阻止冒泡，设置为 false 表示不阻止冒泡
- returnValue 属性，用于阻止事件的默认行为，设置为 false 表示阻止事件的默认行为
第四章 事件类型
4-1 [DOM 事件]QQ 面板拖拽效果（上）
IE10 以前的浏览器不支持 document.getElementsByClassName() 鼠标事件都是在浏览器窗口中的特定位置上发生的。 这个位置信息保存在事件的 clientX 和 clientY 属性中。 所有浏览器都支持这两个属性，它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标。 不包括页面滚动的距离。 mousemove：当鼠标指针在元素内部移动时重复地触发
4-2 [DOM 事件]QQ 面板拖拽效果（下）
鼠标事件 onmouseover onmouseup onmousedown onmouseout onclick
4-3 [DOM 事件]QQ 面板状态切换效果
在适当的地方阻止事件冒泡
4-4 [DOM 事件]抽奖系统（上）
键盘事件
- keyDown 当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件
- keyPress 当用户按下键盘上的字符键时触发，而且如果按住不妨的话，会重复触发此事件
- keyUp 当用户释放键盘上的键时触发
4-5 [DOM 事件]抽奖系统（下）
EVENT 对象的 keyCoden 属性用于得到键盘对应键的键码值