事件对象：在触发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. fragment 中利用spinner实现省市联动

    (1)布局文件就不在说明了,主要说代码的实现,先把代码贴上! package com.example.cl; import android.annotation.SuppressLint; impor ...

  2. HDU 4896 Minimal Spanning Tree(矩阵高速功率)

    意甲冠军: 给你一幅这样子生成的图,求最小生成树的边权和. 思路:对于i >= 6的点连回去的5条边,打表知907^53 mod 2333333 = 1,所以x的循环节长度为54,所以9个点为一 ...

  3. 如何获得SQL Server索引使用情况

    原文:如何获得SQL Server索引使用情况 原文出自: http://www.mssqltips.com/sqlservertip/1239/how-to-get-index-usage-info ...

  4. Android中的应用——谷歌官方Json分析工具Gson使用

    一个.Gson基本介绍 Gson(又称Google Gson)是Google公司公布的一个开放源码的Java库.主要用途为串行化Java对象为JSON字符串,或反串行化JSON字符串成Java对象. ...

  5. MySql分析算法作品索引（马上，只是说说而已B-tree）

    刚开始学习的时候,百度搜索.但我发现很难理解了很多的太复杂,各种物品的整合总结(建议可能看到的文字,我不明白也没关系,再看看操作步骤图,然后结合文,所以,一切都清楚了很多) B-tree.B这是bal ...

  6. 【JDK源码分析】String的存储区与不可变性（转）

    // ... literals are interned by the compiler // and thus refer to the same object String s1 = " ...

  7. Chromium-Dev一些缩写

    备案权 tl;dr: && TL;DR;  :"Too long;Don't read" PSA  :"Publice Service Announcem ...

  8. SharePoint 2013 配置启用搜索服务

    原文:SharePoint 2013 配置启用搜索服务 1.安装完毕SharePoint 2013,新建网站集,点击搜索,出现如下错误(因为没配置,别激动). 2.尝试启动服务器场中的服务之Share ...

  9. WebGL 支持测试，并已支持的浏览器版本摘要

    WebGL 支持情况检測与已支持浏览器版本号汇总 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公 ...

  10. （大数据工程师学习路径）第一步 Linux 基础入门----环境变量与文件查找

    环境变量与文件查找 本节介绍环境变量的作用与用法,及几种搜索文件的方法.学会这些技巧高效地使用 Linux. 一.环境变量 1.变量 要解释环境变量,得先明白变量是什么,准确的说应该是 Shell 变 ...