DOM事件探秘
说到DOM事件，就不得不说以下几点：
1 事件流
事件流：描述的是从页面中接受事件的顺序
事件流分为事件冒泡流和事件捕获流。那么什么是事件冒泡，什么是事件捕获呢？
事件冒泡：即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。
事件捕获：不太具体的元素最早接收事件，而不太具体的元素最后接收事件。它跟事件冒泡是一个截然相反的概念。
2 事件处理程序
2.1 HTML事件处理程序
如下将事件处理程序嵌入到HTML元素当中
<div>
<input type="button" value="按钮" id="btn1" onclick="showMes()"/>
</div> <script type="text/javascript">
function showMes(){
alert('Hello World!');
}
</script>
2.2 DOM 0级事件处理程序 (用得比较多的)
下面的DOM 0级添加和删除事件事件处理程序的表现形式：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>DOM事件探秘</title>
</head> <body>
<input type="text" value="按钮2" id="btn2" />
<script type="text/javascript">
var oBtn2 = document.getElementById("btn2");
//DOM 0级添加事件处理程序
oBtn2.onclick = function(){
alert("这是通过DOM 0级添加的事件处理程序");
}
//DOM 0级删除事件处理程序
oBtn2.onclick = null;
</script>
</body>
</html>
2.3 DOM 2级事件处理程序
DOM 2级事件处理程序定义了两个方法：用于指定和删除事件处理程序的操作：
addEventListener()和removeEventListener(),它们接收三个参数： 要处理的事件名，作为事件处理程序的函数和布尔值(false代表事件冒泡)
下面的DOM 2级添加和删除事件事件处理程序的表现形式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM事件探秘</title>
</head>
<body>
<input type="button" value="按钮3" id="btn3" />
<script type="text/javascript">
function showMes(){
alert('这是通过DOM 2添加的事件处理程序');
}
var btn3 = document.getElementById('btn3');
// DOM 2级添加事件处理程序
btn3.addEventListener('click',showMes,false);
// DOM 2级删除事件处理程序
btn3.removeEventListener('click',showMes,false);
</script>
</body>
</html>
2.4 IE事件处理程序 (支持IE事件处理程序的浏览器是IE和Opera)
IE事件处理程序提供了两个类似DOM的方法:attachEvent()和detachEvent(),它们接收相同的两个参数：要处理的事件名，作为事件处理程序的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM事件探秘</title>
</head>
<body>
<input type="button" value="按钮3" id="btn3" />
<script type="text/javascript">
function showMes() {
alert('IE事件处理程序');
}
var btn3 = document.getElementById('btn3');
// DOM 2级添加事件处理程序
btn3.attachEvent('click', showMes);
// DOM 2级删除事件处理程序
btn3.detachEvent('click', showMes);
</script>
</body>
</html>
2.5 跨浏览器的事件处理程序，将其封装在一个对象里，暂时就给它封装两个方法，添加事件和删除事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM事件探秘</title>
</head>
<body>
<input type="button" value="按钮3" id="btn3" />
<script>
var eventUtil = {
// 添加句柄
addHandler:function(ele,type,handler){
if(ele.addEventListener){
ele.addEventListener(type,handler,false);
} else if(ele.attachEvent){
ele.attachEvent('on'+type,handler);
} else {
ele['on'+type] = handler;
}
},
removeHandler:function(ele,type,handler){
if(ele.removeEventListener){
ele.removeEventListener(type,handler,false);
} else if(ele.detachEvent){
ele.detachEvent(type,handler);
} else {
ele['on'+type] = handler;
}
}
}
</script>
</body>
3 事件对象
什么是事件对象？在触发DOM上的事件时都会产生一个对象event,在IE8以前是window.event
3.1 DOM中的事件对象(以下是比较常见的属性和方法)
(1) type属性 用于获取事件类型
(2) target属性 用于获取事件目标
(3) stopPropagation()方法 用于阻止事件冒泡
(4) preventDefault()方法 阻止事件的默认行为
3.2 IE中的事件对象
(1) type属性 用于获取事件类型
(2) srcElement属性 用于获取事件目标
(3) cancelBubble属性 用于阻止事件冒泡，设置为true表示阻止冒泡，设置为false表示不阻止冒泡
(4) returnValue属性 用于阻止事件的默认行为，设置为false表示阻止事件的默认行为，设置为true表示不阻止事件的默认行为
4 封装event.js,解决浏览器兼容问题
var eventUtil = {
// 添加句柄
addHandler: function(ele, type, handler) {
if (ele.addEventListener) {
ele.addEventListener(type, handler, false);
} else if (ele.attachEvent) {
ele.attachEvent('on' + type, handler);
} else {
ele['on' + type] = handler;
}
},
//删除句柄
removeHandler: function(ele, type, handler) {
if (ele.removeEventListener) {
ele.removeEventListener(type, handler, false);
} else if (ele.detachEvent) {
ele.detachEvent(type, handler);
} else {
ele['on' + type] = handler;
}
},
//获取事件
getEvent: function(event) {
return event ? event : window.event;
}，
//获取事件类型
getType: function(event) {
return event.type;
},
//获取事件的目标
getElement: function(event) {
return event.target || event.srcElement;
},
//阻止事件的默认行为
preventDefault: function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
//阻止事件冒泡
stopPropagation: function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
}
DOM事件探秘的更多相关文章
- 二、JavaScript语言--事件处理--DOM事件探秘
第一章 事件流 事件:是文档或浏览器窗口中发生的.特定的交互瞬间.JavaScript和HTML之间的交互都是通过事件来实现的. 事件流:描述的是从页面中接受事件的顺序 IE:事件冒泡流 Netsca ...
- QQ面板拖拽（慕课网DOM事件探秘）（下）
2.鼠标事件坐标获取 function fnDown(event) { var event = event || window.event; var oDrag = document.getEleme ...
- QQ面板拖拽（慕课网DOM事件探秘）（上）
QQ面板拖拽,效果如图 JavaScript代码如下: function getByClass(clsName, parent) { var oParent = parent ? document.g ...
- 二、JavaScript语言--事件处理--DOM事件探秘--下拉菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- DOM事件
在慕课网上学习了DOM事件探秘课程,特此整理了一下笔记. 慕课网DOM事件探秘课程地址:http://www.imooc.com/learn/138 事件 是文档或浏览器窗口中发生的特定的交互瞬间.[ ...
- DOM 事件深入浅出（二）
在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性 ...
- DOM 事件深入浅出（一）
在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件.敲击键盘事件等.这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果.本文 ...
- 理解DOM事件流的三个阶段
本文主要解决两个问题: 1.什么是事件流 2.DOM事件流的三个阶段 事件流之事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张 ...
- 你真的了解DOM事件么？
你真的了解DOM事件么? 我们大家都知道,人与人之间的交流可以通过语言,文字,肢体动作,面部微表情等,但是你知道Javascript和HTML之间是通过什么进行交互的么?你又知道Javascript和 ...
随机推荐
- 本机搭建zookeeper集群
3个 clientPort分别设置为2181,2182,2083 server.1=127.0.0.1:2888:3888 server.2=127.0.0.2:2889:3889 server.3= ...
- 邻接表无向图(二)之 C++详解
本章是通过C++实现邻接表无向图. 目录 1. 邻接表无向图的介绍 2. 邻接表无向图的代码说明 3. 邻接表无向图的完整源码 转载请注明出处:http://www.cnblogs.com/skywa ...
- VS2013正则表达式应用示例
VS2013正则表达式语法 在查找替换对话框中查看 VS2013语法可在查找替换对话框中查看,具体过程如下: 通过编辑->查找和替换->在文件中替换或者相应快捷键(Ctrl+Shift+H ...
- JavaScript垃圾回收（三）——内存泄露
一.JavaScript内存监测工具 在讨论内存泄露之前,先介绍几款JavaScript内存监测工具. IE的sIEve与JSLeaksDetector(这两个可以在下面的附件中下载),firefox ...
- [转载]"百度方法+"案例—从持续集成到持续交付
前言 百度开放云(https://bce.baidu.com)是百度基于十五年基础架构核心技术积累推出的云服务,目前推出了14个云计算产品和9个大数据产品,并提供数字营销云.在线教育.物联网等10种解 ...
- 炫！一组单元素实现的 CSS 加载进度提示效果
之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...
- LESS-Middleware：Node.js 和 LESS 的完美搭配
LESS 是一个编写 CSS 的很好的方式 ,让你可以使用变量,嵌套规则,混入以及其它许多有用的功能,它可以帮助您更好地组织你的 CSS 代码. 最近我一直在研究 Node.js ,并想用 less- ...
- Simptip – 使用 Sass 制作的 CSS Tooltip 效果
Simptip 是一个简单基于 Sass 的 CSS 工具提示效果.帮助你在网站中加入在不同的方向(上.左.右.下)的工具提示,也可以设置不同的颜色如成功.信息.警告和危险.最后还有其他特性如软边.半 ...
- Java编程思想——初始化与清理
PS:最近一直忙于项目开发..所以一直没有写博客..趁着空闲期间来一发.. 学习内容: 1.初始化 2.清理 1.初始化 虽然自己的Java基础还是比较良好的..但是在解读编程思想的时候还是发现了 ...
- 【Swift学习】Swift编程之旅---属性（十四）
属性关联特定类.结构或枚举的值,存储属性将存储常量和变量作为实例的一部分,计算属性用于计算一个值,而不进行存储.计算属性可以用于类.结构体和枚举里,存储属性只能用于类和结构体.存储属性和计算属性通常用 ...