DOM事件对象
触发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事件对象的更多相关文章
- HTML DOM 事件对象
HTML DOM 事件对象 由 youj 创建,小路依依 最后一次修改 2016-08-04 HTML DOM 事件 HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文 ...
- JS HTML DOM 事件对象(onclick、onmouseenter)
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序. 事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮). HTML DOM 事件 DOM: ...
- DOM事件对象用法
分为三个阶段:事件捕获阶段.目标阶段.事件冒泡阶段. 事件捕获老版本浏览器(IE<=8)不支持,但是事件冒泡可以放心使用. 事件处理程序 一共四类写法,基本都见过,看下写法就知道怎么回事儿了. ...
- JavaScript DOM事件对象的两个小练习 | 学习内容分享
Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! 本文用于记录个人学习过程 ...
- HTML DOM 事件对象 ondragend 事件
学习网站:http://www.runoob.com/jsref/event-ondragend.html 定义和用法 ondragend 事件在用户完成元素或首选文本的拖动时触发. 拖放是 HTML ...
- 深入学习jQuery事件对象
× 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值[9]键值 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event, ...
- JavaScript中的事件对象
JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...
- Javascript高级编程学习笔记(59)—— 事件(3)事件对象
事件对象 在触发DOM‘事件时,会产生一个事件对象 event 该对象包含着所有与事件有关的信息 所有浏览器都支持 event 对象但是支持的方式有所不同 DOM事件对象 兼容DOM的浏览器会将eve ...
- d3.js:数据可视化利器之 交互行为:响应DOM事件
selection.on:事件监听操作符 on()操作符可以添加或移除选择集中每个 DOM元素的事件监听函数: selection.on(type[,listener[,capture]]) 参数ty ...
随机推荐
- Js apply 方法 具体解释
Js apply方法具体解释 我在一開始看到javascript的函数apply和call时,很的模糊,看也看不懂,近期在网上看到一些文章对apply方法和call的一些演示样例,总算是看的有点眉目了 ...
- C语言头文件组织
一.全局变量单独编写(很值得借鉴). 一般习惯将不同功能模块放到一个头文件和一个C文件中. 例如是写一些数学计算函数: //mymath.h #ifndef _mymath_H #define _my ...
- 在spring+hibernaet+mysql事务处理中遇到的一些坑
spring的事务处理本来就是依赖于底层的实现,比如hibernate及数据库本身. 所以,当使用mysql数据库时,首先要确定的是,所操作的对象表是innodb格式的. 1. read-only方法 ...
- Node.js 入门教程和学习资源汇总
这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...
- 自定义的GitLab 头像无法正常显示以及URL总是指向localhost
解决指向localhost的问题: 编辑gitlab的配置vi /etc/gitlab/gitlab.rb,修改external_url 参数值 [Mesogene@localhost ~]$ sud ...
- github Permission denied (publickey)解决办法
想要玩玩git,参考了网友懒惰之计的一篇Blog<github:如何获取项目源代码 >,按部就班完成了所有的步骤的, 可在测试的时候,遇到了问题,总是报错”github Permissio ...
- 微信JS-SDK说明文档及常见问题处理
概述 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微 ...
- Git 分支管理详解
大纲: 1.前言 2.创建分支 3.切换分支 4.合并分支(快速合并) 5.删除分支 6.分支合并冲突 7.合并分支(普通合并) 8.分支管理策略 9.团队多人开发协作 10.总结 注,测试机 Cen ...
- C# 当前程序所有线程
using System.Linq; var threads = System.Diagnostics.Process.GetCurrentProcess().Threads;var count = ...
- Yii 2.0安装
通过 Composer 安装 注意: php版本最好在5.5以上! 1.下载 Yii2的高级应用程序模板 ,然后将其解压缩到一个Web可访问的文件夹. 2.下载Composer-Setup.exe , ...