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和 ...
随机推荐
- 打开都是“Smart Adobe CC Blocker v1.0”已损坏，打不开。 您应该将它移到废纸篓。
安全设置里允许任意来源打开就可以了 “系统偏好设置”->“安全性与隐私”->“允许从以下位置下载的应用程序”->任何来源.
- 增强学习（四） ----- 蒙特卡罗方法(Monte Carlo Methods)
1. 蒙特卡罗方法的基本思想 蒙特卡罗方法又叫统计模拟方法,它使用随机数(或伪随机数)来解决计算的问题,是一类重要的数值计算方法.该方法的名字来源于世界著名的赌城蒙特卡罗,而蒙特卡罗方法正是以概率为基 ...
- Linux 内存管理
查看Linux内存使用情况 free -m Linux内存清理:绝大多数情况下都不需要此操作,因为cache的内存在需要的时候是可以自动释放的- 最好先sync几次,再清理内存,有下面三个级别,数值越 ...
- RHEL6 某业务用户ulimit -a命令找不到
最终确定是shell环境问题,临时改为/bin/bash即可查看. 1.问题现象 # su - jingyu $ id uid=(jingyu) gid=(jingyu) (jingyu) $ uli ...
- 开发人员看测试之细说JBehave
上篇我们说到如何从Github上clone出一个JBehave项目,既是为了学习JBehava,也是为了熟悉下Github.从clone下来的项目看来,基本没什么问题,稍微捋一捋就可以运行,但是就cl ...
- Arctext.js - 基于 CSS3 & jQuery 的文本弯曲效果
Arctext.js 是基于 Lettering.js 的文本旋转插件,根据设置的旋转半径准确计算每个字母的旋转弧度并均匀分布.虽然 CSS3 也能够实现字符旋转效果,但是要让安排每个字母都沿着弯曲路 ...
- Windows Azure Virtual Machine (1) IaaS用户手册
<Windows Azure Platform 系列文章目录> Azure IaaS用户手册 - Azure IaaS相关技术- Azure虚拟机成本分析- 创建Azure虚拟机- 使用 ...
- JAVA 设计模式 外观模式
用途 外观模式 (Facade) 为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个接口使得这一子系统更加容易使用. 外观模式是一种结构型模式. 结构
- Elasticsearch Span Query跨度查询
ES基于Lucene开发,因此也继承了Lucene的一些多样化的查询,比如本篇说的Span Query跨度查询,就是基于Lucene中的SpanTermQuery以及其他的Query封装出的DSL,接 ...
- IOS从视频中获取截图
从视频中获取截图: NSString *movpath =[[NSBundle mainBundle] pathForResource:@”iosxcode4″ ofType:@”mov”]; mpv ...