合肥Web培训
达内合肥web培训中心

0551-64632511

热门课程

web开发之DOM探索

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

合肥达内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培训机构:浅谈2017年web网页新趋势

合肥达内Web培训机构聊一聊web前端开发的行业前景

合肥达内Web前端培训培养软件开发工程师

合肥Web前端培训带给你专业web前端知识

选择城市和中心
贵州省

广西省

海南省