IE中的事件对象

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

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

3）cancelBubble属性 用于阻止事件冒泡

　　设置为true表示阻止事件冒泡  设置为false表示不阻止冒泡

4）returnValue属性 用于阻止事件的默认行为

设置为false表示阻止事件的默认行为

<!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 src="script.js"></script>

    <script src="event.js"></script>

<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(event){

//     event=event || window.event;

//     var ele=event.target||event.srcElement;

//     alert(ele);

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

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

// }

// function showBox(){

//     alert("这是一个box")

// }

// function stopGoto(event){

//     event.stopPropagation();

//     event.preventDefault();

// }

</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>
window.onload=function(){

    var go=document.getElementById('go'),

        box=document.getElementById('box');

    eventUtil.addHandler(box,'click',function(){

        alert('我是整个父盒子');

    });

    eventUtil.addHandler(go,'click',function(e){//接收事件event

        //e=e||window.event;

        e=eventUtil.getEvent(e);//返回event

        alert(eventUtil.getElement(e).nodeName);

        eventUtil.preventDefault(e);

        eventUtil.stopPropagation(e);

    });

}
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']

            }

        },

        getEvent:function(event){

            return event?event:window.event;

        },

        getType:function(event){

            return event.type;

        },

        getElement:function(event){

            return event.target || event.srcElement;

        },

        preventDefault:function(event){

            if(event.preventDefault){

                event.preventDefault();

            }else{

                event.returnValue=false;

            }

        },

        stopPropagation:function(event){

            if(event.stopPropagation){

                event.stopPropagation();

            }else{

                event.cancelBubble=true;

            }

        }

    }

IE中的事件对象的更多相关文章

  1. DOM中的事件对象

    三.事件对象事件对象event1.DOM中的事件对象(1).type:获取事件类型(2).target:事件目标(3).stopPropagation() 阻止事件冒泡(4).preventDefau ...

  2. DOM和IE中的 事件对象

    DOM中的事件对象:(符合W3C标准)    preventDefault()        取消事件默认行为    stopImmediatePropagation() 取消事件冒泡同时阻止当前节点 ...

  3. JavaScript中的事件对象

    JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...

  4. js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象

    事件对象    在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...

  5. js中获取事件对象的方法小结

    原文地址:http://jingyan.baidu.com/article/d8072ac4594d6cec95cefdac.html 事件对象 的获取很简单,很久前我们就知道IE中事件对象是作为全局 ...

  6. DOM中的事件对象和IE事件对象

    DOM中的事件对象 IE事件对象 属性/方法 类型 读/写 说明 属性/方法 类型 读/写 说明  bubles Boolean 只读  表明事件是否冒泡  cancleBubble Boolean ...

  7. Javascript中的事件对象和事件类型

    接上次看JS的事件冒泡和捕获,所以顺带就把事件相关的知识都看完好了 而且想到一个好的学习方法,第一天自己看,第二天把前一天学习的东西写下来,一方面可以当复习,一方面当重新整理并且分享 事件对象 事件处 ...

  8. JS 学习笔记--JS中的事件对象基础

    事件:JavaScript中的事件是由访问web页面用户的一系列操作引起的,比如点击鼠标,键盘按键等.当用户执行某些操作的时候再去执行一些代码. 事件模型:内联模型.脚本模型.DOM2模型 内联模型: ...

  9. JavaScript 中的事件对象（读书笔记思维导图）

    在触发 DOM 上的某个事件时,会产生一个事件对象 event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对象中,会包含 ...

随机推荐

  1. [Linux]history 显示命令的运行时间

    显示线时间历史命令 这里的环境是centos5.8 vim ~/.bashrc 或者 ~/.bash_profile 添加 export HISTTIMEFORMAT="%F %T &quo ...

  2. C#之关于时间的整理

    今天在整理C#的异步编程的时候,看到一个Stopwatch类.让我想起了,时候整理一下C#关于时间的类,望补充.斧正. DataTime类 表示时间上的一刻,即某个时间节点,通常以日期和当天的时间表示 ...

  3. JEECG移动解决方案 - 针对移动应用的应用系统转换的中间件解决方案

     设想: 通过中间件配置,在业务系统中使用到移动应用程序的简单版本.(移动页面生成器) 实现方法: 当前移动应用解决方式非常多:app?html5?微信 採用何种方法来实现?对于一个企业来讲,app分 ...

  4. 纯css3 轮播图 利用keyframes

    效果: 关键点:利用keyframes 原理:infinite 注意点:在处理关键帧动画的时候,注意处理好 总共花费的 animation-duration:time  与每帧延延迟的时间的交错:要让 ...

  5. “NET网络”进行中，多管齐下的人才力挫“”粗俗

            随着互联网的迅猛发展,一些不太干净.低俗的甚至色情的内容不断浮现.不仅严重影响了我们的上网体验,也成为扰乱互联网正常秩序的罪魁祸首,部分不法内容甚至给网民造成了一定的財产损失.在这样的 ...

  6. 【CTO辩论】移动创业大军：谁斗争or变更代理

    众创时代.英雄辈出. 但千军万马过独木桥,竞争厮杀也异常残酷.有人说,这个时代不宜创业,由于技术门槛高了.推广难度高了.盈利模式没了.创业变重了.玩法变了...... 也有人说,时势造英雄.天时地利人 ...

  7. POJ 2777 Count Color(段树）

    职务地址:id=2777">POJ 2777 我去.. 延迟标记写错了.标记到了叶子节点上.. . . 这根本就没延迟嘛.. .怪不得一直TLE... 这题就是利用二进制来标记颜色的种 ...

  8. jdk和cglib简单理解（转）

    之前使用cglib的时候不需要将classLoader作为参数传入,但动态代理却要,带着这个疑惑进入这个方法: Proxy.newProxyInstance(classLoader, interfac ...

  9. 半平面交总结and模板

    博客原文地址:http://blog.csdn.net/xuechelingxiao/article/details/40859973 这两天刷了POJ上几道半平面交,对半平面交有了初步的体会,感觉半 ...

  10. DEV GridView嵌套

    近来的DEV搞更多.试图寻找专业点的程序做,对这样一个小小的研究. 本篇是多么真实,现在的记录,可以通过点击这条线的子表的内容相关联的行中打开的列表.的影响,如下面的: 以下是实现过程: 1.设计器里 ...