DOM探索【一】

事件流

描述的从页面中接受事件的顺序,接收事件的先后决定了谁先触发自身对应函数。

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

事件捕获
   不太具体的节点应该最早接收到事件,而最具体的节点最后接收到事件。

事件处理程序

拙见：也就是怎样为html中的元素添加事件，并绑定函数。

HTML事件处理程序

直接在标签内部,绑定函数
格式：
    html:
    <input type="button" value="按钮" id="btn" onclick="show()">
    js:
    function show(){
        alert("hello,world")
    }
缺点：
    HTML和JS代码紧密的耦合在一起
    修改程序时带来不便

DOM0级事件处理程序

把一个函数值赋值给一个事件的处理程序属性
格式：
    html:
    <input type="button" value="按钮" id="btn" >
    js:
    //获取元素对象
    var btn = docunment.getElementById("btn")
    //添加事件并绑定函数
    btn.onclick=function(){
        //代码段
    }
    //取消事件绑定，若不想在绑定时
    btn.onclick=null;

优势：
    用的比较普遍 兼容性比较好
    且可以为同一事件绑定多个函数
    或者为一个标签绑定多个事件(执行的顺序由绑定的先后次序来决定)

DOM2级事件处理程序

添加事件处理函数
addEventListener()
取消事件处理函数
removeEventListener()

接受三个参数：
    要处理的事件名
    作为事件处理程序的函数
    布尔值
注意：
    第三个参数
    true - 采用事件捕获的形式来捕捉事件
    false- 默认。采用事件冒泡的形式来捕捉事件。
    由于兼容性问题，大多使用false。

格式：
    html:
    <input type="button" value="按钮" id="btn" >
    js:
    //获取元素对象
    var btn = docunment.getElementById("btn")
    //添加事件并绑定函数
    btn.addEventListener("click",show,false)
    btn.addEventListener("click",function(){
        //代码段
    },false)
    //取消事件绑定，若不想在绑定时
    btn.removeEventListener("click",show,false)
注意：
    所有的事件名都要去除"on",如"onclick"只保留"click".
    函数名不再添加引号和小括号

    在取消事件绑定时对remove传递的参数,要与add完全一致。
优点：
    可以为同一事件绑定多个函数
    或者为一个标签绑定多个事件(执行的顺序由绑定的先后次序来决定)

缺点：
    在IE浏览器不支持该方法            

IE事件处理程序

添加事件
attachEvent()
删除事件
detachEvent()

接收两个参数：事件处理程序和事件处理函数

注意：此时的事件名都要加上"on"

格式：
    html:
    <input type="button" value="按钮" id="btn" >
    js:
    //获取元素对象
    var btn = docunment.getElementById("btn")
    //添加事件并绑定函数
    btn.attachEvent("onclick",show)
    btn.("onclick",function(){
        //代码段
    })
    //取消事件绑定，若不想在绑定时
    btn.detachEvent("onclick",show)

跨浏览器的事件处理程序

主要是对DOM2处理程序和IE处理程序的封装

js:
//将多个封装函数的函数储存在一个变量对象中
var eventUtil ={
    //添加句柄,依次判断是否支持该方法
    addHandler:function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false)
        }
        else if(element.attachEvent){
            element.attachEvent("on"+type,handler)
        }
        else{
            element["on"+type]=handler
        }
    }
    removeHandler:function(){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false)
        }
        else if(element.detachEvent){
            element.detachEvent("on"+type,handler)
        }
        else{
            element["on"+type]=null
        }

    }
} 

注意：是用DOM对象的属性进行能力判断,判断之后才对事件添加。

知识什锦

1. element.onclick=functionName等价于element["onclick"]=functionName
2. btn.addEventListener("click",function(event){
    alert(this.value)
    },false)
   当元素触发函数时，将传递给默认函数this,指向触发该函数的DOM对象。
3. 可将多个函数储存在一个变量对象中格式如下
    var functionSet = {
        functionName1:function(){
            //代码段...
        }
        functionName2:function(){
            //代码段..
        }
        ....
    }
    调用： functionSet.functionName1()