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和 ...
随机推荐
- JavaScript禁用页面刷新
JavaScript禁用页面刷新代码如下: //禁用F5刷新 document.onkeydown = function () { if (event.keyCode == 116) { event. ...
- 【web前端面试题整理03】来看一点CSS相关的吧
前言 昨天我们整理了14到js的题,今天我们再来整理14到CSS相关的题目,昨天整理时候时间有点晚了我便有点心浮气躁,里面的一些题需要再次解答,好了看看今天有些什么吧. PS:我这里挑一点来做就好了, ...
- Linux一块网卡添加多个IP地址
环境: RHEL6.4 需求: Linux一块网卡添加多个IP地址 一.临时生效 1.1 网卡eth0添加一个IP地址 1.2 修改eth0:0的广播地址 二.永久生效 2.1 编辑ifcfg-eth ...
- 初探JavaScript（二）——JS如何动态操控HTML
除去五一三天,我已经和<JavaScript Dom编程艺术>磨合了六天,第一印象很好.慢慢的,我发现这是一块排骨,除了肉还有骨头.遇到不解的地方就会多看几遍,实在不懂的先跳过,毕竟,初次 ...
- Primer – 支撑 GitHub 的 CSS 工具包和准则
Primer 是一个 CSS 工具包,支撑着 GitHub 的前端设计.它的目的仅限于提供通用部件,为我们的开发者提供最大的灵活性,并保持 GitHub 的独特风格.它基于 SCSS 建成,可以通过 ...
- 如何禁用事件的浮升（div的子元素的点击事件会触发父元素的点击事件）
<div onclick="alert();"> <div onclick="alert();"></div> </d ...
- [SDK2.2]Windows Azure Virtual Network (3) 创建AD Server并添加至Virtual Network
<Windows Azure Platform 系列文章目录> 在之前的文章中,笔者已经向大家介绍了如何创建一个简单的Azure Virtual Network. 本章我将创建一台域服务器 ...
- Elasticsearch Span Query跨度查询
ES基于Lucene开发,因此也继承了Lucene的一些多样化的查询,比如本篇说的Span Query跨度查询,就是基于Lucene中的SpanTermQuery以及其他的Query封装出的DSL,接 ...
- Redhat7.2 如何修改主机名(hostname)？
Redhat7.2 在安装的时候,会默认生成主机名:localhost. 那么如何修改成自己想要的自己名? //格式为:用户名@主机名 比如: [root@localhost ~]# 修改成[roo ...
- 【Swift学习】Swift编程之旅---集合类型之字典（八）
字典是一种存储相同类型多重数据的存储器.每个值(value)都关联独特的键(key),键作为字典中的这个值数据的标识符.和数组中的数据项不同,字典中的数据项并没有具体顺序. 字典写作Dictionar ...