DOM事件
DOM事件的级别
DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。而DOM事件分为3个级别：DOM0级事件处理，DOM2级事件处理和DOM3级事件处理
- DOM0 : element.onclick = function(e) {}
- DOM1 ：该标准中未涉及到事件绑定的相关东西
- DOM2 : element.addEventListener('click', function(e){}, false)， 一个DOM元素可以添加多个事件
- DOM3 : element.addEventListener('keyup', function(e){}, false)，在DOM2标准基础上面增加了新的事件类型：鼠标事件，键盘事件，焦点事件
DOM事件模型
- 事件捕获：从外向内, window -> document -> body -> button
- 事件冒泡：从内向外，button -> body -> document -> window
DOM事件流
浏览器为当前的页面与用户进行交互的过程中，点击鼠标后事件如何传入和响应的呢？
捕获阶段：从外部容器开始向内
目标阶段：事件通过捕获到达目标阶段
冒泡阶段：从目标元素再上传到window对象
事件委托
什么事件可以代理？什么事件不可以代理呢？
- 通常支持事件冒泡（Event Bubbling）的事件类型为鼠标事件和键盘事件，例如：mouseover, mouseout, click, keydown, keypress。
- 接口事件(指的是那些不一定与用户操作有关的事件)则通常不支持事件冒泡（Event Bubbling），例如：load, change, submit, focus, blur。
事件对象event的属性方法的差别
| 事件 | IE | DOM |
|---|---|---|
| 停止冒泡 | cancelBubble = true | stopPropagation() |
| 阻止元素默认事件 | returnValue = false | preventDefault() |
| 事件目标 | srcEelement | target |
自定义事件
- 如何给一个按钮绑定一个自己定义的事件呢？
// 1. 使用Event对象来自定义事件
// 开始创建一个自己定义的事件对象
var eve = new Event('customEvent');
// 使用dom2事件处理的方式来给这个元素绑定一个事件
var dom = document.documentElement;
dom.addEventListener('customEvent', function(e) {
console.log('customEvent called!');
});
// 下面的这句话可以在适合的场景中来触发一个自己定义的事件对象
setTimeout(function(){
// 在1s之后触发这个事件
dom.dispatchEvent(eve);
}, 1000)
// 2. 使用CustomEvent来实现自定义事件
var dom = document.documentElement;
// 使用CustomEvent的方式可以在事件触发的时候传递一个参数，然后通过e.detail 的方式来获取这个参数信息
var myClick = new CustomEvent('myClick', {detail : {name : 'zhangsan', age : 24}});
dom.addEventListener('myClick', function(e){
console.log(e.detail, e.target)
})
dom.dispatchEvent(myClick);
