DOM学习之事件处理和事件对象

认识DOM

DOM全称是document object model(文档对象模型)，那DOM是用来干什么的呢？假设把你的文档看成一个单独的对象，DOM就是如何用HTML或者XML对这个对象进行操作和控制的标准。根据W3C DOM规范,DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件。可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。

一、事件流

事件流描述的是从页面中接受事件的顺序。
IE 的事件流是事件冒泡流，而 Netscape 的事件流是事件捕获流

1. 事件冒泡
   事件冒泡，即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上转播至最不具体的节点(文档)。

2. 事件捕获
   事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。

二、事件处理程序

1.HTML事件处理程序

<button id="btn1" onclick="showmsg()">按键1</button>

/** html事件处理程序
如button1中那样直接在html元素标签里使用，缺点：html代码中包含js，一旦js代码发生变动，相应的html也要做相应的修改，不推荐使用
*/

2.DOM 0级事件处理程序

var btn2 = document.getElementById("btn2");

btn2.onclick = function() {
    alert("这是通过DOM0级添加的事件")
}
/* DOM 0级事件处理程序  
优点：js代码和html代码是分开的，js是绑定在元素的属性上，并不是在元素上直接绑定，
很好的实现了js与html的分离，更好的进行维护，推荐使用，而且它可以添加多个事件，按定义的先后顺序行进执行
*/

3.DOM 2级事件处理程序

function showmsg() {
    alert("hello world"); 
}

var btn3 = document.getElementById("btn3");

btn3.addEventListener('click',showmsg,false); //添加事件

//btn3.removeEventListener('click',showmsg,false); //删除事件

/** DOM 2级事件处理程序 
    addEventListener(type, listener , false)
    removeEventListener(type, listener ,false)
    第三个参数可选 默认false 表示事件句柄在冒泡阶段执行 true表示事件句柄在捕获阶段执行

    注意：事件不用 on 例如点击事件直接写 'click' ，同样推荐使用,它也可以添加多个事件，按定义的先后顺序行进执行
*/ 

4.IE事件处理程序

function showmsg() {
    alert("hello world"); 
}

var btn3 = document.getElementById("btn3");

btn3.attachEvent('onclick',showmsg); //IE添加事件

//btn3.detachEvent('onclick',showmsg); //IE删除事件

/* IE事件处理程序
    attachEvent(type, listener)添加事件
    detachEvent(type, listener)删除事件
    接受相同的两个参数：事件处理的名称 和 事件处理的函数
    不使用第三个参数的原因是：IE8以及更早的浏览器都只支持事件，冒泡，不支持事件捕获

    注意：事件要加 on
*/

三、事件对象

事件对象 event

DOM中的事件对象

• type: 获取事件类型
• target：事件目标
• stopPropagation() 阻止事件冒泡
• preventDefault() 阻止事件的默认行为

IE中的事件对象

• type: 获取事件类型
• srcElement：事件目标
• cancelBubble = true 阻止事件冒泡
• returnValue = false 阻止事件的默认行为

四、实现跨浏览器的事件处理程序（IE下和非IE下的浏览器）

这里我用对象，封装了一个跨浏览器 DOM事件处理方法的工具类 ，话不多说直接上源码 event.js , 如果我们写原生的js操作DOM元素时，对于事件处理和对象处理可以使用

/*
    跨浏览器 DOM事件处理方法
*/ 
     //调用例如： 
        //添加点击事件：eventUtil.addEvent(btn,'click',function)
        //删除点击事件：eventUtil.removeEventListener(btn,'click',function)
        //阻止事件冒泡：eventUtil.stopPropagation(e)  e 来自于 event|window.event

var eventUtil={
            // 添加事件
            addEvent:function(element,type,fn){
                // 是否是IE事件 还是普通事件
               if(element.addEventListener){
                 element.addEventListener(type,fn,false);
               }
               else if(element.attachEvent){
                 element.attachEvent('on'+type,fn);
               }
               else{
                 element['on'+type] = fn;
               }
            },
            // 删除事件
            removeEvent:function(element,type,fn){
                // 是否是IE事件 还是普通事件
               if(element.removeEventListener){
                 element.removeEventListener(type,fn,false);
               }
               else if(element.detachEvent){
                 element.detachEvent('on'+type,fn);
               }
               else{
                 element['on'+type] = null;
               }
            },
            //IE8下的event 是 window.event
            getEvent:function(event){
                return event?event:window.event;
                //等同 return event | window.event
            },
            //获取事件类型
            getType:function(event){
                return event.type;
            },
            //获取事件来自于的目标元素
            getElement:function(event){
                return event.target || event.srcElement;
            },
            //阻止事件默认行为 例如a标签转跳
            preventDefault:function(event){
                if(event.preventDefault){
                    event.preventDefault();
                }
                else{
                    event.returnValue = false;
                }   
            },
            //阻止事件冒泡
            stopPropagation:function(event){
                if(event.stopPropagation){
                    event.stopPropagation();
                }
                else{
                    event.cancelBubble = true;
                }
            }
  }

以上就是自己对DOM学习中事件处理和对象处理的总结，希望写篇博文记录下自己的积累。

咳咳，还是那句话

还是要不断学习，因为你还很年轻