事件对象：在触发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>

dom02的更多相关文章

  1. 005 DOM02

    在上一篇DOM的基础上,继续案例的实践. 一:案例 1.禁用文本框 <!DOCTYPE html> <html lang="en"> <head> ...

  2. JS基础语法之DOM02(事件）

    1.常用事件 1.onclick 单击 应用场景:为按钮绑定 2.ondbclick 双击 3.onfocus   获得焦点 4.onblur 失去焦点 应用场景:用于表单验证,用户离开某个输入框时, ...

  3. js 大厦之JavaScript事件

    1.js事件简介 事件(Event) 是 JavaScript 应用跳动的心脏 ,进行交互,使网页动起来.也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了 ...

  4. eCharts_基于eCharts开发的一个多图表页面

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. Android之Handler的postDelayed()使用方法

    这是一种创建多线程信息功能 用法: 1,首先创建一个Handler物 Handler handler=new Handler(); 2.然后创建一个Runnable物 Runnable runnabl ...

  2. 搜索引擎排名不友好的五个地点-SEO

    搜索引擎(百度/谷歌/雅虎)排名不友好的五个地点 别的站点,推断标准和考核得分点是不 一样的,避免对百度排名不友好的五种站点操作 你的站点是否在这五种站点里,决定你的站点能否获得排 名. 1.有没有同 ...

  3. Nancy 框架学习

    Nancy 框架 1.是一个轻量级用于构建http相应的web框架: 2.与mvc类似,有自己的路由机制: 3.可以处理 DELETE ,  GET ,  HEAD ,  OPTIONS ,  POS ...

  4. VMWARE虚拟机无法访问的三种方法分析

    bridged(桥接模式). NAT(网络地址转换模式) host-only(主机模式). 理论认识: 1.bridged(桥接模式) 在这个地方模式.虚拟机等同于网络内的一台物理主机,可对手动设置I ...

  5. unity3d 学习笔记（两）

    AudioClip 使用声音资源 unity3d资源可以被设置为声3d声音或2d声音.3d间的影响,越近声音越大 component: Audio source: 声音的发生物体 Audio list ...

  6. swift类名称显示变量

    <span style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); font-family: Aria ...

  7. OpenNMS在安装”我找不到jrrd.dll“错误的解决方法

    在Windows 2003 Server(虚拟机)安装OpenNMS.找不到jrrd.dll错误.尝试从学习OpenNMS官网下载jrrd-1.0.7.tar.gz,我们没有发现标dll文件,编译需要 ...

  8. BZOJ 3122 SDOI2013 随机数发生器 数论 EXBSGS

    标题效果:给定一列数X(i+1)=(a*Xi+b)%p 最低要求i>0.所以Xi=t 0.0 这个问题可以1A那很棒 首先讨论特殊情况 如果X1=t ans=1 如果a=0 ans=b==t? ...

  9. SQL入门学习1-查询基础

    2-1 SELECT语句基础 SELECT语句作用 SELECT 语句用于从表中选取数据. 结果被存储在一个结果表中(称为结果集). 重点 使用SELECT语句从表中选取数据. 为列设定显示用的别名 ...

  10. CentOS7 安装Hadoop集群环境

    先按照上一篇安装与配置好CentOS以及zookeeper http://www.cnblogs.com/dopeter/p/4609276.html 本章介绍在CentOS搭建Hadoop集群环境 ...