dom02

事件对象：在触发DOM上的事件时dou都会产生一个对象，事件对象event

DOM中的事件对象

1）type属性用于获取事件类型

2）target属性用于获取事件目标

3）stopPropagation()方法用于阻止事件冒泡

4）preventDefault()阻止默认行为

bubbles,canselable属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

<script type="text/javascript">

//dom中的事件对象：

    //type属性获取事件类型

    //target获取事件目标

    //stopPropagation阻止事件冒泡（最具体的元素接收）

    //preventDefault()阻止事件的默认行为

window.onload=function(){

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

    btn2.onclick=function(){

        alert('这个是dom0级添加的事件')

    }

// btn2.onclick=null;

   // var btn3=document.getElementById('btn3');

   /*  btn3.addEventListener('click',showMessage,false);

    btn3.addEventListener('click',function(){

        alert(this.value)

    },false);*/

    // btn3.removeEventListener('click',showMessage,false);

    // btn3.attachEvent('onclick',showMessage)

}

function showMessage(ev){

    alert(ev.target.nodeName);//目标节点名称//target获取事件目标//type获取事件类型

    ev.stopPropagation();//阻止事件冒泡（最具体的元素接收）

}

function showBox(){

    alert("这是一个box")

}

var eventUtil={

        //添加句柄

        // var element,type,handler;

        addHandler:function(element,type,handler){

            if(element.addEventListener){//dom二级

                element.addEventListener(type,handler,false)

            }else if(element.attachEvent){//IE

                element.attachEvent('on'+type,handler);

            }else{//dom0级

                element['on'+type]=handler;//element.onclick===element['onclick']

            }

        },//对象的属性用“，”分隔

    //删除句柄

        removeHandler:function(element,type,handler){

            if(element.removeEventListener){//dom二级

                element.removeEventListener(type,handler,false)

            }else if(element.detachEvent){//IE

                element.detachEvent('on'+type,handler);

            }else{//dom0级

                element['on'+type]=null;//element.onclick===element['onclick']

            }

        }

    }

</script>

</head>

<body>

<div id="box">

    <input type="button"  value="按钮" id="btn" onclick="showMessage()"/>

    <input type="button" value="按钮2" id="btn2"/>

    <input type="button" value="按钮3" id="btn3"/>

    <a href=""></a>

</div>

<script>

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

var box=document.getElementById('box');

eventUtil.addHandler(btn3,'click',showMessage);

eventUtil.addHandler(box,'click',showBox);

// eventUtil.removeHandler(btn3,'click',showMessage);

</script>

</body>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

<script type="text/javascript">

//dom中的事件对象：

    //type属性获取事件类型

    //target获取事件目标

    //stopPropagation阻止事件冒泡（最具体的元素接收）

    //preventDefault()阻止事件的默认行为

window.onload=function(){

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

    btn2.onclick=function(){

        alert('这个是dom0级添加的事件')

    }

// btn2.onclick=null;

   // var btn3=document.getElementById('btn3');

   /*  btn3.addEventListener('click',showMessage,false);

    btn3.addEventListener('click',function(){

        alert(this.value)

    },false);*/

    // btn3.removeEventListener('click',showMessage,false);

    // btn3.attachEvent('onclick',showMessage)

}

function showMessage(ev){

    alert(ev.target.nodeName);//目标节点名称//target获取事件目标//type获取事件类型

    ev.stopPropagation();//阻止事件冒泡（最具体的元素接收）

}

function showBox(){

    alert("这是一个box")

}

function stopGoto(event){

    event.stopPropagation();

    event.preventDefault();

}

var eventUtil={

        //添加句柄

        // var element,type,handler;

        addHandler:function(element,type,handler){

            if(element.addEventListener){//dom二级

                element.addEventListener(type,handler,false)

            }else if(element.attachEvent){//IE

                element.attachEvent('on'+type,handler);

            }else{//dom0级

                element['on'+type]=handler;//element.onclick===element['onclick']

            }

        },//对象的属性用“，”分隔

    //删除句柄

        removeHandler:function(element,type,handler){

            if(element.removeEventListener){//dom二级

                element.removeEventListener(type,handler,false)

            }else if(element.detachEvent){//IE

                element.detachEvent('on'+type,handler);

            }else{//dom0级

                element['on'+type]=null;//element.onclick===element['onclick']

            }

        }

    }

</script>

</head>

<body>

<div id="box">

    <input type="button"  value="按钮" id="btn" onclick="showMessage()"/>

    <input type="button" value="按钮2" id="btn2"/>

    <input type="button" value="按钮3" id="btn3"/>

    <a href="evnt.html" id="go">跳转</a>

</div>

<script>

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

var box=document.getElementById('box');

eventUtil.addHandler(btn3,'click',showMessage);

eventUtil.addHandler(box,'click',showBox);

eventUtil.addHandler(go,'click',stopGoto);

// eventUtil.removeHandler(btn3,'click',showMessage);

</script>

</body>

</html>

</html>

相关文章