JS DOM2级事件基础

DOM2级事件基础

DOM0级事件绑定：只能给一个元素的某一个行为绑定一次方法，第二次绑定的会把前面的覆盖掉

DOM2事件绑定，其实是让元素通过原型链一直找到EventTarget这个内置类原型上的addEventListener方法实现的

DOM2：DOM0中的行为类型，用DOM2一样可以绑定；而且DOM2中还提供了一些DOM0没有的行为类型，DOMContentLoaded：当页面中的DOM结果（HTML结构）加载完成，触发的行为

---

window.onload = function(){} :
当页面中的所有资源都加载完成（图片、HTML结构、音视频。。。）才会执行后面的函数；由于使用DOM0级事件绑定，所以在一个页面中只能用一次，后面在写会把前面的覆盖掉；因为它是采用DOM0事件绑定，所以只能绑定一次

jQuery：$(document).ready（function（）{}）：
只要当页面中的HTML结构加载完成就会执行对应的函数；并且在同一个页面中可以出现多次；
原理：使用DOM2事件绑定，并且绑定的行为是DOM2中新增加的那个DOMContentLoaded

window.addEventListener("load", fucntion(){}, false);
window.addEventListener("load", fucntion(){}, false);

---

DOM2级事件绑定

HTMLElement.addEventListener(event, callBack, boolean)

boolean：为true捕获阶段触发， 为false冒泡阶段触发

HTMLElement.removeEventListener(event, callBack, boolean):

使用DOM2级事件绑定回调函数时，使用实名函数时，可以使用HTMLElement.removeEventListener(event, callBack, boolean)来移除对应的事件, event, callBack, boolean一个也不能变

兼容问题

在IE6~8浏览器中，我们不支持addEventListener/removeEventListener， 如果想实现DOM2事件绑定只能用attachEvent/detachEvent
它只有两个参数，不能想addEventListener那样控制在那个阶段发生， 默认只能在冒泡阶段发生
行为需要添加“on”，和DOM0特别类似

和标准浏览器的事件池机制对比：

• 顺序问题：IE6~8执行的时候顺序是混乱的，标准浏览器是按照绑定顺序依次执行的
• 重复问题：IE6~8可以给同一个元素的同一个行为绑定多个相同的方法
• THIS问题：IE6~8中当方法执行的时候，THIS指向WINDOW，标准浏览器指向的当前的元素

DOM2事件机制

• 只能给某个元素的同一个行为绑定多个“不同”的方法（如果方法相同了只能保留一个）
• 当行为触发，会按照绑定的先后顺序依次把绑定的方法执行
• 执行的方法中的this是当前被绑定事件的元素本身

事件池

存储当前元素行为绑定的方法