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() // ...
随机推荐
- [转]Linux常用命令
系统信息arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS / ...
- LINQ系列：Linq to Object限制操作符
1. Where 限制操作符Where用于过滤序列,按照提供的逻辑对序列中的数据进行过滤.Where可以出现多次. 1.1 原型定义 public static IEnumerable<TSou ...
- jQuery 2.0.3 源码分析 事件体系结构
那么jQuery事件处理机制能帮我们处理那些问题? 毋容置疑首先要解决浏览器事件兼容问题 可以在一个事件类型上添加多个事件处理函数,可以一次添加多个事件类型的事件处理函数 提供了常用事件的便捷方法 支 ...
- Math的三个将小数值舍入为整数方法
舍入规则: Math.ceil():执行向上舍入,即它总是将数值向上舍入为最接近的整数: Math.floor():执行向下舍入,即它总是将数值向下舍入为最接近的整数: Math.round():执行 ...
- JavaScript == 、!=、===、!===的比较
; '; ; test == num //true 相同类型 相同值 test === num //true 相同类型 相同值 test !== num //false test与num类型相同,其值 ...
- T-SQL：毕业生出门需知系列（四）
第4课 过滤数据 4.1 使用 WHERE 子句:过滤 只检索所需数据需要指定搜索条件(即过滤条件). WHERE 子句在表名(FROM 子句)后给出,根据 WHERE 子句中指定的条件过滤. SEL ...
- spring4+hibernate4+struts2项目整合的步骤及注意事项
首先,在整合框架之前,我们需要知道Spring框架在普通Java project和Web project中是略有不同的. 这个不同地方就在于创建IOC容器实例的方式不同,在普通java工程中,可以在m ...
- 【知识积累】使用Httpclient实现网页的爬取并保存至本地
程序功能实现了爬取网页页面并且将结果保存到本地,通过以爬取页面出发,做一个小的爬虫,分析出有利于自己的信息,做定制化的处理. 其中需要的http*的jar文件,可以在网上自行下载 import jav ...
- 百度地图、ECharts整合HT for Web网络拓扑图应用
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...
- 7.8 数据注解特性--Column
Column特性可以用到类的属性中,Code-First默认的约定是使用属性名称作为列名.这个Column特性可以打破这个特性. 看下面的代码: using System; using System. ...