DOM——DOM事件

DOM0事件 

 

var oDiv = document.getElementById("div1");

 

当我们触发oDiv这个元素本身的click行为的时候，会让后面的function执行:不仅仅是执行，而且我们的浏览器还会默认为这个方法传递一个参数值-->我们一般会给它设置一个形参接收(当然是用arguments也可以获取到)-->"事件对象":包含了我们当前操作的这个事件中的相关的信息

事件对象e本身也存在兼容问题：在标准浏览器中是浏览器默认传递的形参值e、在IE6~8下我们使用的是全局对象window下的event属性 e=e||window.event;
1、e.type 存储的是当前的事件行为类型，例如："click"...
2、e.target 存储的是事件源(当前事件发生在哪个元素上)  这个属性不兼容：e.srcElement  例如：e.target=e.target||e.srcElement;
3、e.clientX/e.clientY：鼠标触发点距离当前屏幕窗口左上角的X和Y轴的偏移值
4、e.pageX/e.pageY：鼠标触发点距离整个文档(第一屏)左上角的X和Y轴的偏移值  但是在IE下是不存在这个属性的
　　e.pageY=e.pageY||(e.clientY+(document.documentElement.scrollTop||document.body.scrollTop));
5、e.preventDefault ? e.preventDefault() : e.returnValue = false; -->阻止事件的默认行为
6、e.stopPropagation ? e.stopPropagation() : e.cancelable = true; -->组织事件的冒泡传播
    oDiv.onclick = function (e) {
        e = e || window.event;
    }

默认行为的理解：拿a标签来说，天生点击的时候具有跳转链接的默认行为，如果我们只想实现点击，不想实现跳转，那么需要把默认行为禁止掉;
    var oLink = document.getElementById("link1");
    oLink.onclick = function (e) {
        e = e || window.event;
        alert(1);
        //e.preventDefault ? e.preventDefault() : e.returnValue = false;
        //href="javascript:;" 相当于在阻止它的默认行为
    }

DOM2级事件

DOM二级事件：元素所属内置类EventTarget的原型上定义的两个方法：addEventListener、removeEventListener就是我们的DOM二级绑定事件的方法
元素.addEventListener(eventType,eventFn,true/false) 默认一般都写false，让其在冒泡传播阶段发生；true让其在捕获传播阶段发生
在IE6~8下不兼容我们的addEventListener这个方法--->attachEvent("on"+eventType,eventFn) 只有在冒泡阶段发生 (detachEvent移除事件绑定)

    var oDiv = document.getElementById("div1");
        oDiv.addEventListener("click", function () {
            console.log(this);//this-->oDiv
        }, false);

        oDiv.attachEvent("onclick", function () {
            console.log(this);//this-->window
        });

　　

DOM二级事件相对于DOM0级事件的好处：
1、DOM2级事件可以相对比较灵活的控制我们的传播机制
2、DOM0级事件只能给一个元素的同一个事件类型绑定一个方法，绑定的第二个方法会把我们的第一个覆盖掉；而DOM2级事件可以给一个元素的同一个事件类型绑定多个不同的方法(这些方法都存在事件池中，当我点击的时候，这些方法都会一个个的执行)；
3、DOM0中的事件类型在DOM2中都可以使用，但是DOM2级事件绑定中提供了一些DOM0没有的事件类型：DOMContentLoaded(HTML结构加载完成)...

oDiv.addEventListener("click", function (e) {
        console.log(1);
    }, false);
    oDiv.addEventListener("click", function (e) {
        console.log(2);
    }, false);

//点击一下，就输出一次 1  2

　

window.onload和jQuery中的$(document).ready的区别:
1、window.onload是当HTML结构、图片、文字等都加载完成才会执行；而ready是只要HTML结构加载完成就会执行；
2、window.onload在页面中之能使用一次；而ready可以使用多次；
原理：jQuery中的ready采用的是DOM2级事件绑定，绑定的是DOMContentLoaded这个方法；而window.onload采用DOM0级事件绑定，用的是onload事件；