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和 ...
随机推荐
- 接触Matlab10年后的一个总结，随时使用Matlab要掌握的一些要点
不记得上一次写超过20行的matlab程序是什么时候了,大概是2013年吧,那个时候写过2篇文章,实际用到了 一些matlab的内容,超过200行的matlab程序应该要追溯到2011年了,最近为了帮 ...
- python类定义与c#的一些区别
c#中可以定义一个空类,但是python中定义空类需要加pass class EmptyClass(object): pass python的lei是多继承 python子类继承了基类,如果子类也 ...
- .NET Core爬坑记 1.0 项目文件
前言: 之所以要写这个系列是因为在移植项目到ASP.NET Core平台的过程中,遇到了一些“新变化”,这些变化有编译方面的.有API方面的,今天要讲的是编译方面的一些问题.我把它们整理后分享出来,以 ...
- 用Android模拟器也可以开发和测试NFC应用
从Android2.3开始支持NFC.不过NFC应用只能在Android手机(或平板电脑)上测试和开发,而且Android手机还必须有NFC芯 片.而且如果测试NFC传输文件时至少需要两部支持NFC的 ...
- 两种CSS3圆环进度条详解
晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...
- 只用CSS实现容器内图片上下左右居中
一直以来,大家都知道,DIV容器内设置 text-align:center 即可让图片居中,但是DIV内默认的图片是上对齐,不会上下居中,如果想要实现这样的效果,JS判断是比较麻烦的,因为DIV容器内 ...
- iOS 基础控件（下）
上篇介绍了UIButton.UILabel.UIImageView和UITextField,这篇就简短一点介绍UIScrollView和UIAlertView. UIScrollView 顾名思义也知 ...
- WebView输入框提示
做基于WebView应用时,页面上有一个输入框,当输入的文字过多时,超过输入框的行数时,输入框能够滚动,这时间问题来了,输入的提示箭头会移动到输入框外,如何解决这个问题呢,查找chromium源码如下 ...
- ServletContext中常用方法介绍
一..获取Tomcat的Context的初始化参数.1.获取Tomcat的server.xml中设置Context的初始化参数.例如: <Context path="/testcont ...
- pymssql examples
http://pymssql.org/en/latest/pymssql_examples.html Example scripts using pymssql module. Basic featu ...