DOM2事件基础知识

[Yangxiaqing]

我们使用DOM2事件绑定，其实是让box通过原型链一直找到EventTarget这个内置类原型上的addEventListener方法实现的。
DOM0级事件绑定：只能给一个元素的某一行为绑定一次方法，第二次绑定的会把前面的覆盖掉

    var box = document.getElementById('box');
 
    box.onclick = function () {
        console.log(1);
    };
    box.onclick = function () {
        console.log(2);
    };//输出结果为2

解决：

	box.addEventListener("click", function (e) {
		console.log(1);
	}, false);
	box.addEventListener("click", function (e) {
		console.log(2);
	}, false);
	//1、2都输出

总结：

DOM2的优势：

• 可以给某一个元素的同一个行为绑定多个不同的方法
• DOM0中的行为类型，我们用DOM2一样可以绑定；而且DOM2中还提供了一些DOM0没有的行为类型
  DOMConentLoaded：当页面中的DOM结构（HTML结构加载完成）触发的行为

	box.addEventListener("DOMCOntentLoaded",function () {},false);

复习：

• 1、
  window.onload = function () {};——当页面中的所有资源都加载完成（图片、HTML结构、音视频。。）才会执行后面的函数；
  并且在一个页面中只能用一次，后面再写会把前面的覆盖掉；
  因为它是采用DOM0事件绑定，所以只能绑定一次
• 2、
  jQuery:$(document).ready(function () {});//=== $(function () {})——只要当页面中的HTML结构加载完成就会执行对应的函数；
  并且在同一个页面中可以出现多次；
  采用的是DOM2事件绑定，
  并且绑定的行为是DOM2中新增的那个 DOMConentLoaded

DOM2的一些细节知识点：

1、关于移除：

	function fn1(e) {
		console.log(this);//this--->box
	};

	box.addEventListener("click", fn1, false);
	//移除的时候需要保证三个参数：行为、方法、哪个阶段发生，一点都不能差
	//所有我们在使用DOM2绑定的时候，我们一般都给他绑定的是实名函数
	box.removeEventListener("click", fn1, false);

2、DOM2事件池——是用来存储当前元素行为绑定的方法的（浏览器自带的）

• 只能给某个元素的同一个行为绑定多个不同的方法（如果方法相同了只能留一个）

function fn1() {console.log(1);};
function fn2() {console.log(2);};
function fn3() {console.log(3);};
function fn4() {console.log(4);};
function fn5() {console.log(5);};
function fn6() {console.log(6);};
function fn7() {console.log(7);};
function fn8() {console.log(8);};
function fn9() {console.log(9);};
function fn10() {console.log(10);};
function fn11() {console.log(11);};
function fn12() {console.log(12);};

box.addEventListener("click", fn1, false);
box.addEventListener("click", fn1, false);//1

• 当行为触发，会按照绑定的先后顺序依次把绑定的方法执行

function fn1() {console.log(1);};
function fn2() {console.log(2);};
function fn3() {console.log(3);};
function fn4() {console.log(4);};
function fn5() {console.log(5);};
function fn6() {console.log(6);};
function fn7() {console.log(7);};
function fn8() {console.log(8);};
function fn9() {console.log(9);};
function fn10() {console.log(10);};
function fn11() {console.log(11);};
function fn12() {console.log(12);};

box.addEventListener("click", fn6, false);
box.addEventListener("click", fn1, false);
//box.addEventListener("click", fn1, false);//1
box.addEventListener("click", fn2, false);
box.addEventListener("click", fn3, false);
box.addEventListener("click", fn4, false);
box.addEventListener("click", fn5, false);

box.addEventListener("click", fn7, false);
box.addEventListener("click", fn8, false);
box.addEventListener("click", fn9, false);

box.addEventListener("click", fn11, false);
box.addEventListener("click", fn12, false);
box.addEventListener("click", fn10, false);

box.addEventListener("mouseover", fn1, false);

• 执行的方法中的this是当前被绑定事件的元素本身
• 事件池画图：

DOM2事件的兼容问题：

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

box.attachEvent("onclick", fn1);

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

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