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() // ...
随机推荐
- Android-Activity-Dialog theme touch outsize
最近遇到一个蛋疼的问题: 一个Activity,主题设置成 Dialog 然后点击外面要求这个Activity 不能关闭. 这下好了,直接在 style 的 theme 里面加一个属性就好了. 加上去 ...
- JDK安装源码src和doc
(1)src 打开JDK的安装目录如(C:\Program Files\Java\jdk1.8.0_91)有一个src.zip的压缩文件,这个压缩文件里就是源码. mkdir src copy src ...
- 使用paramiko如何连接服务器？
本文和大家分享的是python开发中使用paramiko连接服务器的方法和步骤,希望通过本文的,对大家学习和使用paramiko有所帮助. ssh连接步骤 1.ssh server建立server p ...
- SqlServer索引的原理与应用
索引的概念 索引的用途:我们对数据查询及处理速度已成为衡量应用系统成败的标准,而采用索引来加快数据处理速度通常是最普遍采用的优化方法. 索引是什么:数据库中的索引类似于一本书的目录,在一本书中使用目录 ...
- 实战MEF（4）：搜索范围
在前面的文章中,几乎每个示例我们都会接触到扩展类的搜索位置,我们也不妨想一下,既然是自动扩展,它肯定会有一个或者多人可供查找的位置,不然MEF框架怎么知道哪里有扩展组件呢? 就像我们用导航系统去查找某 ...
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- MySQL学习笔记七：存储引擎
1.MySQL存储引擎的设计采用“插件式”方案,用户可以很方便地选择使用哪种存储引擎,想使用mysql没有提供的引擎时,可以自己安装进去. 查看支持的存储引擎 mysql> show engin ...
- EntityFramework 外键值映射
如果在 EF OnModelCreating 中配置了实体外键映射,也就是 SQL Server 中的 ForeignKey,那么我们在添加实体的时候,主实体的主键值会自动映射到子实体的外键值,并且这 ...
- 小菜学习Winform（一）贪吃蛇2
前言 上一篇<小菜学习Winform(一)贪吃蛇>中实现了简单版的贪吃蛇,在文章末也提到需要优化的地方,比如使用oo.得分模式.速度加快模式和减少界面重绘.因为是优化篇,实现方式上一篇有, ...
- js 中类似时钟的显示
先上代码 <!DOCTYPE html> <html> <head> <script> function startTime() { var today ...