触发DOM上的事件时会产生一个事件对象event。

  event的内容:与事件有关的信息,导致事件的元素,事件的类型及其他与特定事件相关的信息。

  event对象会传入到事件处理程序中。

一、DOM 中的event对象的主要属性和方法

  1、属性:type 被触发事件的类型  currentTarget其事件处理程序当前正在处理事件的那个元素  target事件的目标

  this  currentTarget  target的区别

  eventPhase表明事件正处于哪个阶段,捕获阶段为1,处于目标对象上为2,冒泡阶段为3

//this始终等于currentTarget的值,而target只指事件的真正目标
var btn = document.getElementById("myBtn");
btn.onclick=function(event){
alert(event.currentTarget===this);//true
alert(event.target===this);//true
} //target是指事件的真正目标
document.body.onclik=function(event){
alert(event.currentTarget===document.body);//true
alert(this===document.body)//true
alert(event.target===document.getElementById("mtBtn"));//true
}

  2、方法:preventDefault():取消特定事件的默认行为如链接,只有cancelable设置为true时,才可以应用此方法

var link = document.getElementById("myLink");
link.onclick = function(event){
event.cancelable=true;
event.preventDefault();
}

    stopProgration()方法:用于立即停止事件在DOM层次中的传播,即取消进一步的事件捕获或冒泡

var btn=document.getElementById("myBtn");
btn.onclick = function(event){
alert("Clicked");
event.stopPropagation();
} document.body.onclick=function(event){
alert("Body clicked");//不会执行,事件被阻断了
}

二、IE 中的event对象与不同,下面是一个兼容方案

var EventUtil = {
    //添加事件
addHandle:function(element,type,handle){
if(element.addEventListener){
element.addEventListener(type,handle,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handle);
}else{
element["on"+type]=handle;
}
},
    //移除事件
removeHandle:functioon(element,type,handle){
if(element.removeEventListener){
element.removeEventListener(type,handle,false);
}else if(element.detachEvent){
element.detachEvent(type,handle);
}else{
element["on"+type]=null;
}
},
//获取事件对象
getEvent:function(event){
return event?event:window.event; //IE浏览器获取event对象的方式是window.event
},
    //获取目标对象
    getTarget:function(event){
      return event.target||evetn.srcElement;
    }
//阻止默认行为
preventDefault:function(event){
if(event.preventDefault){
event.prventDefault();
}else{
event.returnValue=false; //IE浏览器特有的方式
}
},
//停止事件传播
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true; //IE浏览器特有的方式
}
}
}

  二、事件分类

DOM事件对象的更多相关文章

  1. HTML DOM 事件对象

    HTML DOM 事件对象 由 youj 创建,小路依依 最后一次修改 2016-08-04 HTML DOM 事件 HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文 ...

  2. JS HTML DOM 事件对象(onclick、onmouseenter)

    HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序. 事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮). HTML DOM 事件 DOM:  ...

  3. DOM事件对象用法

    分为三个阶段:事件捕获阶段.目标阶段.事件冒泡阶段. 事件捕获老版本浏览器(IE<=8)不支持,但是事件冒泡可以放心使用. 事件处理程序 一共四类写法,基本都见过,看下写法就知道怎么回事儿了. ...

  4. JavaScript DOM事件对象的两个小练习 | 学习内容分享

    Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! 本文用于记录个人学习过程 ...

  5. HTML DOM 事件对象 ondragend 事件

    学习网站:http://www.runoob.com/jsref/event-ondragend.html 定义和用法 ondragend 事件在用户完成元素或首选文本的拖动时触发. 拖放是 HTML ...

  6. 深入学习jQuery事件对象

    × 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值[9]键值 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event, ...

  7. JavaScript中的事件对象

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

  8. Javascript高级编程学习笔记(59)—— 事件(3)事件对象

    事件对象 在触发DOM‘事件时,会产生一个事件对象 event 该对象包含着所有与事件有关的信息 所有浏览器都支持 event 对象但是支持的方式有所不同 DOM事件对象 兼容DOM的浏览器会将eve ...

  9. d3.js:数据可视化利器之 交互行为:响应DOM事件

    selection.on:事件监听操作符 on()操作符可以添加或移除选择集中每个 DOM元素的事件监听函数: selection.on(type[,listener[,capture]]) 参数ty ...

随机推荐

  1. C,C#,C++中&&和||,&和|的联系和区别

    本文来自:http://www.cnblogs.com/GT_Andy/archive/2010/03/30/1921805.html 两者计算结果相同(针对各自的运算对象),只是性能上有差别而已. ...

  2. RehHat enterprise 5.4 安装git

    今天想来研究一下git,就自己安装一个试试,没想到遇到各种问题.经过各种百度和google,终于都解决了,现在来总结一下: 1.安装完redhat 5.4,安装gcc编译器的问题:这个gcc编译器需要 ...

  3. iOS获取UIView上某点的颜色值

    项目需求中遇到获取UIView上某个坐标点的RGB颜色值的需求,现在把自己找到的解决方案简单总结记录一下,遇到了下面的情况: 不可移动的UIView 旋转式的UIView 滑条式的UIView 不可移 ...

  4. Sqlserver系列(二) 模糊查询 like

    通配符 % 匹配零个或多个字符 _ 匹配单个字符 []  指定范围 ([a-f]) 或集合 ([abcdef]) 中的任何单个字符. [^] 不属于指定范围 ([a-f]) 或集合 ([abcdef] ...

  5. Json.Net序列化和反序列化设置

    首先补充一点,Json.Net是支持序列化和反序列化DataTable,DataSet,Entity Framework和NHibernate的.我举例说明DataTable的序列化和反序列化.创建一 ...

  6. Android 判断文件的类型

    import java.util.HashMap; import java.util.Iterator; /** * 判断文件的类型 */ public class MediaFileUtil { p ...

  7. IOS开发系列 --- 核心动画

    原始地址:http://www.cnblogs.com/kenshincui/p/3972100.html 概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥i ...

  8. override和new的区别

    override 1. override是派生类用来重写基类中方法的: 2. override不能重写非虚方法和静态方法: 3. override只能重写用virtual.abstract.overr ...

  9. arm ldr 指令

    ldr 指令格式:(读取概念) ldr{条件} 1目的寄存器,2存储器地址 eg: ldr r0,[r1]; 把r1中数据值读取到r0中: ldr r0,[r1,r2];把r1+r2的数值 读取到r0 ...

  10. AJAX防重复提交的办法总结

    最近的维护公司的一个代理商平台的时候,客服人员一直反映说的统计信息的时候有重复数据,平台一直都很正常,这个功能是最近新进的一个实习生同事写的功能,然后就排查问题人所在,发现新的这个模块的AJAX提交数 ...