JavaScript事件对象与事件处理程序
一、事件对象
事件对象：在DOM触发事件时，会产生一个事件对象event,这个事件对象包含着所有与事件相关的信息。既然event是事件对象，那么它必然存在属性
①DOM中的事件对象event属性
（1）、type属性用于获取事件类型
（2）、target、srcElement<兼容IE事件>属性用于获取事件目标
（3）、stopPropagation()方法 用于阻止事件冒泡
（4）、preventDefault() 方法 阻止事件的默认行为
二、DOM2级事件处理程序
（1）、addEventListener() 用于处理指定事件处理程序操作
（2）、removeEventListener() 用于处理删除事件处理程序操作
三、IE事件处理程序
（1）、attachEvent() 用于处理指定事件处理程序操作
（2）、detachEvent() 用于处理移除事件处理程序操作
接收相同的两个参数，事件处理程序的名称和事件处理程序的函数。
四、跨浏览器的事件处理程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM事件机制</title>
<script type="text/javascript">
window.onload=function(){
var oButton=document.getElementById('button');
var oBox=document.getElementById('Box');
var oA=document.getElementById('a');
var eventUtils={
// element type事件类型 hander事件处理程序
addHandler:function(element,type,hander){
if (element.addEventListener) {
//DOM2级
element.addEventListener(type,hander,false)
}else if (element.attachEvent) {
//IE事件绑定
element.attachEvent('on'+type,hander)
}else{
//DOM0级
element['on'+click]=hander; };
},
removeHandler:function(element,type,hander){
if (element.removeEventListener) {
//DOM2级
element.removeEventListener(type,hander,false)
}else if (element.deltachEvent) {
//IE事件绑定
element.deltachEvent('on'+type,hander)
}else{
//DOM0级
element['on'+click]=null; };
}
};
eventUtils.addHandler(oButton,'click',showMessage);
eventUtils.addHandler(oBox,'click',function(){alert('oBox')});
eventUtils.addHandler(oA,'click',stopGo);
}
function showMessage(event){
console.info(event); //事件对象
console.info(event.type); //事件类型
console.info(event.target); //事件目标
event.stopPropagation(); //阻止事件冒泡
}
function stopGo(event){
console.info(event); //事件对象
console.info(event.type); //事件类型
console.info(event.target); //事件目标
event.preventDefault();//preventDefault() 方法 阻止事件的默认行为
alert('跳转');
}
</script>
</head>
<body>
<div id="Box">
<input type="button" name="" value="按钮" id="button" />
<a href="DomTest.html" id="a">跳转</a>
</div>
</body>
</html>
将上述跨浏览器事件处理程序代码抽成工具包
//事件处理
var eventUtils={
// element type事件类型 hander事件处理程序
//添加事件处理
addHandler:function(element,type,hander){
if (element.addEventListener) {
//DOM2级--冒泡事件
element.addEventListener(type,hander,false)
}else if (element.attachEvent) {
//IE事件绑定
element.attachEvent('on'+type,hander)
}else{
//DOM0级
element['on'+click]=hander; };
},
//移除事件处理
removeHandler:function(element,type,hander){
if (element.removeEventListener) {
//DOM2级
element.removeEventListener(type,hander,false)
}else if (element.deltachEvent) {
//IE事件绑定
element.deltachEvent('on'+type,hander)
}else{
//DOM0级
element['on'+click]=null; };
},
//获取事件对象
getEvent:function(event){
return event ? event : window.event;
},
//获取事件类型
getEventType:function(event){
return event.type
},
//获取事件目标
getEventTarget:function(event){
return event.target || event.srcElement;
},
//取消事件默认行为
getPreventDefalut:function(event){
event.preventDefault ? event.preventDefault() : event.returnValue==false;
/*if (event.preventDefault) {
event.preventDefault();
} else{
event.returnValue==false;
};*/
},
//阻止事件冒泡
stopPropagation:function(event){
event.stopPropagation ? event.stopPropagation() : event.cancelBubble();
/*if (event.stopPropagation) {
event.stopPropagation();
}else if (event.cancelBubble) {
event.cancelBubble(); //阻止IE事件冒泡
};*/
},
//获取选择器对象
getSelector:function(id){
return document.getElementById(id);
}
}
JavaScript事件对象与事件处理程序的更多相关文章
- js跨浏览器事件对象、事件处理程序
项目中有时候会不用jquery这么好用的框架,需要自己封装一些事件对象和事件处理程序,像封装AJAX那样:这里面考虑最多的还是浏览器的兼容问题,原生js封装如下:var EventUtil={ //节 ...
- JavaScript事件对象与事件的委托
事件对象 包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTa ...
- JS事件流、事件监听、事件对象、事件委托
JS事件流: 01.DOM级别和DOM事件 02.JS事件流:页面中接收事件的顺序 事件冒泡阶段-->处于目标阶段-->事件捕获阶段 (事件捕获总发生在事件冒泡前面) 03.捕获:从外向里 ...
- JS事件对象与事件委托
事件对象 包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTa ...
- 【2017-05-03】winform打印控件、事件对象和事件数据、MDI窗体容器
一.打印控件 第一步先把打印对象搞出来. - printDocument 打印对象(将要打印的内容放到该对象里,从该对象里取内容打印) 设置他的PrintPage事件(对于要打印的每一页触发一次 ...
- DOM事件处理程序-事件对象-键盘事件
事件流: 事件流--描述的是从页面中接受事件的顺序 IE ---事件冒泡流:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). Netsc ...
- JavaScript的事件概述以及事件对象，事件流
事件处理程序 JavaScript 事件对象是由访问 Web 页面的用户引起的一系列操作,例如:用户点击页面上的某个按钮或者鼠标移动到页面的某个图片上而产生一系列的互动的反馈. 我们通过为指定事件绑定 ...
- Javascript中的事件对象和事件类型
接上次看JS的事件冒泡和捕获,所以顺带就把事件相关的知识都看完好了 而且想到一个好的学习方法,第一天自己看,第二天把前一天学习的东西写下来,一方面可以当复习,一方面当重新整理并且分享 事件对象 事件处 ...
- jQuery基础（4）- 位置信息、事件流、事件对象、事件代理、jquery事件
一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // ...
随机推荐
- jQuery源码分析系列(38) : 队列操作
Queue队列,如同data数据缓存与Deferred异步模型一样,都是jQuery库的内部实现的基础设施 Queue队列是animate动画依赖的基础设施,整个jQuery中队列仅供给动画使用 Qu ...
- android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果
需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果, 总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...
- Android应用中实现系统“分享”接口
在android下各种文件管理器中,我们选择一个文件,点击分享可以看到弹出一些app供我们选择,这个是android系统分享功能,我们做的app也可以出现在这个列表中. 第一步:在Manifest.x ...
- 窥探Swift之字符串（String）
之前总结过Objective-C中的字符串<Objective-C精选字符串处理方法>,学习一门新语言怎么能少的了字符串呢.Swift中的String和Objective-C语言中NSSt ...
- hdu4831 Scenic Popularity（线段树）
题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=4831 题目大概意思就是有多个风景区和休息区,每个风景区有热度,休息区的热度与最接近的分景区的热度相同, ...
- UCOSII内核代码分析
1 UCOSII定义的关键数据结构 OS_EXT INT8U OSIntNesting; OSIntNesting用于判断当前系统是否正处于中断处理例程中. OS_EXT ...
- C# 在excel中查找及替换数据
在使用Excel处理数据时,有时候工作表内容很多,如果手动地一行一行的找数据很难发现它们在哪个地方.微软Excel给我们提供了一个很强大的数据处理功能-查找和替换,通过这个功能,我们可以快速地找到想要 ...
- vmware网卡设置详解
转载请注明出处!本文连接及作者.不得用于商业用途! http://hi.baidu.com/quantumcloud/blog/item/9156a6c584996c179c163d5b.html B ...
- aud$定位错误用户密码登陆数据库的具体信息
环境:Oracle 11.2.0.3 客户端使用错误的用户密码登陆数据库 查询最近1天由于密码错误登陆失败的信息 查询当前审计中有哪些returncode值 1. 客户端使用错误的用户密码登陆数据库 ...
- CentOS 7.2 yum方式安装MySQL 5.7
CentOS 7之后的版本yum的默认源中使用MariaDB替代原先MySQL,因此安装方式较为以往有一些改变: 下载mysql的源 wget http://dev.mysql.com/get/mys ...