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开发学习之路-图片颜色获取器开发（1）
系列第一篇,从简单的开始,一步一步完成这个小项目. 颜色获取就是通过分析图片中的每个像素的颜色,来分析整个图片的主调颜色,有了主调颜色,我们可以用于图片所在卡片的背景或者标题颜色,这样整体感更加强烈. ...
- Android—自定义Dialog
在 Android 日常的开发中,Dialog 使用是比较广泛的.无论是提示一个提示语,还是确认信息,还是有一定交互的(弹出验证码,输入账号密码登录等等)对话框. 而我们去看一下原生的对话框,虽然随着 ...
- 搭建LNAMP环境（六）- PHP7源码安装MongoDB和MongoDB拓展
上一篇:搭建LNAMP环境(五)- PHP7源码安装Redis和Redis拓展 一.安装MongoDB 1.创建mongodb用户组和用户 groupadd mongodb useradd -r -g ...
- JavaSript模块规范 - AMD规范与CMD规范介绍（转）
JavaSript模块规范 - AMD规范与CMD规范介绍 JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者 ...
- ES6学习记录
前言 由于要学习React Native ,所以得用到ES6,故为运用React Native做一个铺垫 学习记录 一.变量 1.let let 与 var 作用相同,用于定义变量,但是作用域不同.不 ...
- C语言static
1. static 变量 静态变量的类型说明符是static. 静态变量当然是属于静态存储方式,但是属于静态存储方式的量不一定就是静态变量. 例如外部变量虽属于静态存储方式,但不一定是静态变量,必须由 ...
- jQuery源码分析系列(30) : Ajax 整体结构
开头引用一段 想起一句话:前端研究,研究个屁~ 的确如此呀.补充下联:前端设计,设计个屁~ 前端目前最大的困境是,如 HTML 一样,无论你承不承认,市场上并不太需要 HTML 高手 其实这里引发一个 ...
- lua解释执行脚本流程
#include "lua.hpp" #include <iostream> using namespace std; #pragma comment(lib, &qu ...
- 12款非常精致的免费 HTML5 & CSS3 网站模板
01. Joefrey Mahusay 很炫的单页网站模板,基于 HTML5 & CSS3 制作,适合用于设计师个人简历.摄影师和平面设计师的个人作品展示. 演示 下载 02. Folder ...
- 传智播客--XAML布局--连连看界面（小白内容）
一个简单的10*10连连看,有100个格子,可以在XAML里面用ColumnDefinition和RowDefinition各写10组,但是这样效率会很慢,因此,可以采用动态生成的方式进行. publ ...