课程咨询 :0551-64632511 QQ:2146233496

合肥web前端培训

合肥web培训 > 达内新闻 > web开发之DOM探索
  • web开发之DOM探索

    发布:合肥web培训      来源:达内新闻      时间:2016-05-25

  • 合肥达内web培训专家讲一下DOM的相关知识,希望对达内web培训班学员有一定帮助。

    一、事件流

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

    1.事件冒泡

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

    2.事件捕获

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

    二、事件处理程序

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

    1.HTML事件处理程序

    直接在标签内部,绑定函数

    格式:

        html:
        <input type="button" value="按钮" id="btn" onclick="show()">
        js:
        function show(){
            alert("hello,world")
        }

    缺点:

    HTML和JS代码紧密的耦合在一起
    修改程序时带来不便

    2.DOM0级事件处理程序

    把一个函数值赋值给一个事件的处理程序属性

    格式:

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

    优势:

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

    3.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浏览器不支持该方法            

    4.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)

    5.跨浏览器的事件处理程序

    主要是对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(){
                //代码段..
            }
            ....
        }
        调用: function.functionName1()

    推荐文章

上一篇:巧用Canvas模拟微信红包照片

下一篇:前端工程师须知的CSS小技巧

最新开班日期  |  更多

WEB零基础全日制班

WEB零基础全日制班

开班日期:5-31

WEB零基础周末班

WEB零基础周末班

开班日期:5-31

WEB前端业余班

WEB前端业余班

开班日期:5-31

WEB前端就业班

WEB前端就业班

开班日期:5-31

  • 地址:合肥市蜀山区肥西路66号汇金大厦21楼
  • 课程培训电话:0551-64632511 QQ:2146233496     全国服务监督电话:400-111-8989
  • 服务邮箱 tousu@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56