事件对象：在触发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. rabbitmq技术的一些感悟（一）

    Rabbitmq 初识rabbitmq RabbitMQ是流行的开源消息队列系统,用erlang语言开发.RabbitMQ是AMQP(高级消息队列协议)的标准实现.假设不熟悉AMQP,直接看Rabbi ...

  2. sgu128snack

    按我的理解大概说下题意: 有非常多个点,最多一万个,告诉你它们的坐标.如今须要构造一条闭合线.这个闭合线满足下面六点: 1必须是闭合的. 2必须用到全部的点. 3构造的线段之间若成角,则必须是90度. ...

  3. JSP_include指令和&lt;jsp:include&gt;

    包括三个文件:jsp_include.jsp, static.html, two.jsp 周边环境:tomcat7.0. myeclipse10 1.jsp_include.jsp <%@ pa ...

  4. Repository、IUnitOfWork和IDbContext

    DDD 领域驱动设计-谈谈Repository.IUnitOfWork和IDbContext的实践 上一篇:<DDD 领域驱动设计-谈谈 Repository.IUnitOfWork 和 IDb ...

  5. WCF搭建

    WCF搭建 前言:前面三篇分享了下DDD里面的两个主要特性:聚合和仓储.领域层的搭建基本完成,当然还涉及到领域事件和领域服务的部分,后面再项目搭建的过程中慢慢引入,博主的思路是先将整个架构走通,然后一 ...

  6. vs2010中文简体版下载链接(含中文msdn)

    昨天朋友说vs2010中文版能够下载了,自己開始还不相信,正好周末,于是就下载了试一下 安装了果然是中文版,本来是msdn订阅用户才干够下载的,感谢上传的网友. 文件名称 cn_visual_stud ...

  7. 《神秘的程序员们》漫画26~28：《万年坑系列》 I、II、III（转）

    26 <万年坑系列> I:那些令你憎恶的系统从何而来? 世界上总有一些令人憎恶的系统,而你却天天非用不可.这些系统的提供方们既不缺钱也不缺人,有的还很热衷于改版升级. 但为何升级完后,它们 ...

  8. ubuntu 14.04 hadoop eclipse 0配置基本环境

    动人的hadoop第二天.构造hadoop该环境还花了两天时间,在这里写自己配置的过程,我希望能帮助! 我将文中用到的全部资源都分享到了  这里,点开就能下载,不须要一个个的找啦! 当中有<Ha ...

  9. Codeforces 135A-Replacement（思维）

    A. Replacement time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  10. OOP 创建对象的7种方式

    JavaScript OOP 创建对象的7种方式   我写JS代码,可以说一直都是面向过程的写法,除了一些用来封装数据的对象或者jQuery插件,可以说对原生对象了解的是少之又少.所以我拿着<J ...