说到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事件探秘的更多相关文章

  1. 二、JavaScript语言--事件处理--DOM事件探秘

    第一章 事件流 事件:是文档或浏览器窗口中发生的.特定的交互瞬间.JavaScript和HTML之间的交互都是通过事件来实现的. 事件流:描述的是从页面中接受事件的顺序 IE:事件冒泡流 Netsca ...

  2. QQ面板拖拽(慕课网DOM事件探秘)(下)

    2.鼠标事件坐标获取 function fnDown(event) { var event = event || window.event; var oDrag = document.getEleme ...

  3. QQ面板拖拽(慕课网DOM事件探秘)(上)

    QQ面板拖拽,效果如图 JavaScript代码如下: function getByClass(clsName, parent) { var oParent = parent ? document.g ...

  4. 二、JavaScript语言--事件处理--DOM事件探秘--下拉菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. DOM事件

    在慕课网上学习了DOM事件探秘课程,特此整理了一下笔记. 慕课网DOM事件探秘课程地址:http://www.imooc.com/learn/138 事件 是文档或浏览器窗口中发生的特定的交互瞬间.[ ...

  6. DOM 事件深入浅出(二)

    在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性 ...

  7. DOM 事件深入浅出(一)

    在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件.敲击键盘事件等.这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果.本文 ...

  8. 理解DOM事件流的三个阶段

    本文主要解决两个问题: 1.什么是事件流 2.DOM事件流的三个阶段 事件流之事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张 ...

  9. 你真的了解DOM事件么?

    你真的了解DOM事件么? 我们大家都知道,人与人之间的交流可以通过语言,文字,肢体动作,面部微表情等,但是你知道Javascript和HTML之间是通过什么进行交互的么?你又知道Javascript和 ...

随机推荐

  1. RAC Concept

    1. RAC的高可用性 RAC的高可用性主要包含以下几点: 1> 实现节点间的负载均衡. 2> 实现失败切换的功能. 3> 通过Service组件来控制客户端的访问路径. 4> ...

  2. Canvas 示例:4种超炫的网站动画背景效果

    今天,我们想分享一些动画背景的灵感.全屏背景图片的网站头部是最新的网页设计趋势,已经持续了一段时间.最近人们一直在转向动画添加更多的视觉兴趣到他们的网站中,在这里我们想向您分享几个使用  JavaSc ...

  3. SQL Server逻辑读、预读和物理读

    SQL Server数据存储的形式 预读:用估计信息,去硬盘读取数据到缓存.预读100次,也就是估计将要从硬盘中读取了100页数据到缓存. 物理读:查询计划生成好以后,如果缓存缺少所需要的数据,让缓存 ...

  4. NET实现微信公共平台上传下载多媒体文件(转)

    举个例子,有人对着我们的公共微信号拍个照片发送过来,然后我们处理这个照片,比如进行ocr识别字(随后就会降到这个例子),或者人脸识别,或者拍照取证等,这些功能都是相当有用的.那么我们现在就要分析一下这 ...

  5. Cordova webapp实战开发:(3)后面可能会学到的东西

    在<Cordova webapp实战开发:(2)认识一下Cordova>中我们了解了Cordova和Phonegap的关系,并简要介绍了一下它的架构,以及多平台性,并给大家留了一些作业.我 ...

  6. ECharts+BaiduMap+HT for Web网络拓扑图应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

  7. 使用Spark分析拉勾网招聘信息(三): BMR 入门

    简述 本文,意在以最小的篇幅,来帮助对大数据和Spark感兴趣的小伙伴,能尽快搭建一个可用的Spark开发环境.力求言简意赅.文章,不敢自称BMR的最佳实践,但绝对可以帮助初学者,迅速入门,能够专心于 ...

  8. WinForm,MVC知识点

    WinForm的一些基础知识,用来回忆自己遗忘的,唤醒自己的知识. 虽然现在有MVC但是我觉得还是要学习一下WinForm的,毕竟以前也被大家用了好多年. 基础知识01 1:一个控件有很多的事件,每个 ...

  9. Emit学习(2) - IL - 对象的创建过程

    上一篇的介绍中, 并没有介绍到对象的创建过程, 这一篇主要就介绍一下, 对象的创建过程. 其实熟悉了IL语法之后, 完全可以用Reflector反编译代码去查看. 而且正因为有这个工具, 可以对照着R ...

  10. ASP.NET Core开发-MVC 使用dotnet 命令创建Controller和View

    使用dotnet 命令在ASP.NET Core MVC 中创建Controller和View,之前讲解过使用yo 来创建Controller和View. 下面来了解dotnet 命令来创建Contr ...