事件对象：在触发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. innerHTML使用方法

    使用方法: 比方在<body>中写了例如以下的代码:<div id=top></div> 如今用top.innerHTML="..........&quo ...

  2. linux VIM基本命令

    linux VIM命令: vim 在命令行中输入vim,进入vim编辑器 Esc 退出i(插入)命令进行其他命令使用 :sh 进入shell命令行,运行完命令后ctrl+d退出又一次进入vim编辑继续 ...

  3. 左右v$datafile和v$tempfile中间file#

    v$datafile关于存储在文件中的数据视图的信息,v$tempfile查看存储在一个临时文件中的信息. 有两种观点file#现场,首先来看看官方文件的定义: V$DATAFILE This vie ...

  4. bzoj 2437 [Noi2011]兔子和鸡蛋 [二分图匹配]

    叙述性说明 这些日子.兔子和蛋像一个新的棋盘游戏. 这场比赛是在 n 行 m 在船上进行列. 前,棋盘上有一 个格子是空的,其他的格子中都放置了一枚棋子,棋子或者是黑色,或者是白色. 每一局游戏总是兔 ...

  5. NSIS脚本：在卸载页面收集信息

    原文 NSIS脚本:在卸载页面收集信息 此功能用于在软件卸载时收集相关信息,以便进行后续改进.实现功能如图: 以下为实现代码: 01 !include nsDialogs.nsh 02 !includ ...

  6. DFT 展开式和 FFT推导

    C语言的FFT //---------------------------------------------------------------------------------- //----- ...

  7. Java并发编程：线程池的使用（转）

    Java并发编程:线程池的使用 在前面的文章中,我们使用线程的时候就去创建一个线程,这样实现起来非常简便,但是就会有一个问题: 如果并发的线程数量很多,并且每个线程都是执行一个时间很短的任务就结束了, ...

  8. cocos2d-x 网络请求

    [cocos2dx]rapidjson用法以及中文显示的解决方法 cocos2dx 读取json及解析 cocos2dx rapidjson 高速解析JSON  --- [cocos2d-x官方文档] ...

  9. Systrace

    在构造函数,修复bug.完成代码后,你应该花一些时间来专注于应用性能.应用视频像素和运行的运行速度和流畅度影响用户体验.         Android应用执行在一个共享资源的环境中,你的应用的性能会 ...

  10. 左右c++与java中国的垃圾问题的分析与解决

    左右c++与java中国的垃圾问题的分析与解决 DionysosLai(906391500@qq.com)  2014/8/1 问题分析: 之所以会出现中文乱码问题,归根结底在于中文的编码与英文的编码 ...