DOM（四）事件流
1.冒泡型事件
浏览器的事件模型分两种：捕获型事件和冒泡型事件。由于ie不支持捕获型事件，所以以下主要以冒泡型事件作为讲解。
（dubbed bubbling）冒泡型指事件安装最特定的事件到最不特定的事件逐一触发。
<body onclick="add('body<br>')">
<div onclick="add('div<br>')">
<ponclick="add('p<br>')"> click me</p>
</div>
</body>
<div id="display">
</div>
<script type="text/javascript">
function add(sText) {
var ulo = document.getElementById("display");
ulo.innerHTML += sText;
}
</script>
以上三个函数都添加了onclick函数，单机p元素后三个函数都触发，先执行了p元素，再执行了div，最后执行了body
这这里顺便提醒下捕获型事件，它的顺序正好和冒泡型事件相反。
2.事件监听
一个事件都需要函数来响应，这类函数通常称为事件处理函数（enent handler），从另外一个角度看，这些函数都在实时监听着是否有事件发生，通常称为事件监听函数(enevt listener),事件监听函数对于不同的浏览器区别较大。
i.通用监听方法，比如使用onclick方法，几乎每个标签都支持此方法。而且浏览器兼容性都很高
考虑到行为，事件分离。
一般使用使用以下方式进行监听
<body>
<div id="me">click</div>
<script type="text/javascript">
var opp = document.getElementById("me"); //找到事件
opp.onclick = function(){ //设置事件函数
alert("我被点击了！")
}
</script>
</body>
以上介绍的两者方法都十分便捷，在制作处理一些小功能时都被光大开发者所喜爱。但对于同一个事件。他们都只能添加一个函数，列如对于p标记的onclick函数，利用这两种方法都只能有一个函数，因此，ie有自己的解决办法，同事，标准的dom则规定了另外一种方法。
ii.IE中的监听方法
早ie浏览器中，每个元素都有两个方法来处理时间的监听。
分别是attachEvent()和detachEnevt()。
从它们的函数名称就能看出来，attachEnevt()是用来给某个元素添加事件处理的函数，而detachEvent()则是用来删除元素上的监听函数。它们的语法如下：
[object].attachEvent("enevt_handler","fnHandler");
[object].detachEvent("enevt_handler","fnHandler");
其中enevt_handler代表常用的onclick , onload, onmouseover等
fnHandler是监听函数的名称。
上一节事件中可以使用attachEvent()方法替代添加监听函数，当单击了一下，可以使用detachEvent()删除监听函数，使其下次单击后再不执行。
<script type="text/javascript">
function fnclick() {
alert("我被点击了！");
oP.detachEvent("onclick","fnclick");
}
var oP;
window.onload = function() {
oP = document.getElementById("oop"); //找到对象
oP.attachEvent("onclick","fnclick"); //添加监听函数 }
</script>
<div>
<p id="oop"> </p>
</div>
iii.添加多个监听事件（ie）
<script language="javascript">
function fnClick1(){
alert("我被fnClick1点击了");
}
function fnClick2(){
alert("我被fnClick2点击了");
//oP.detachEvent("onclick",fnClick1); //删除监听函数1
}
var oP;
window.onload = function(){
oP = document.getElementById("myP"); //找到对象
oP.attachEvent("onclick",fnClick1); //添加监听函数1
oP.attachEvent("onclick",fnClick2); //添加监听函数2
}
</script>
</head> <body>
<div>
<p id="myP">Click Me</p>
</div>
3.标准DOM事件监听
与ie的两个方法对于，标准DOM也使用两个方法分别添加和删除监听函数。即addEventListener()，和removeEventListener()
与ie不同，这两个函数接受3个参数，即事件的名称，要分配的函数名和是用于冒泡阶段还是捕获阶段。捕获阶段的参数为true，冒泡阶段参数为false.语法如下：
[object].addEventListener("event_name",fnHandler,bCapture);
[object].removeEventListener("event_name",fnHandler,bCapture);
这两个函数的使用方法和ie基本类似，只不过要注意，event_name的名称是“click”，“mouseover”等，而不是Ie中的“onclick”，“onmouseover”。
另外第三个参数bCapture通常设置为false，冒泡阶段。
标准dom的事件监听方法：
<script language="javascript">
function fnClick1() {
alert("我被点击了1");
oP.removeEventListener("click", fnClick1, false);
} function fnClick2() {
alert("我被点击了2");
} window.onload = function() {
oP = document.getElementById("myP");
oP.addEventListener("click", fnClick1, false);
oP.addEventListener("click", fnClick2, false);
}
</script>
<div>
<p id="myP">Click Me</p>
</div>
具体的执行顺序大家可测试。
DOM（四）事件流的更多相关文章
- [已转移]IE事件流和DOM标准事件流的区别
该文章已转移到博客:https://cynthia0329.github.io/ 1.执行的顺序不一样 冒泡型事件模型: button->div->body (IE事件流) 捕获型事件模型 ...
- JS事件流与DOM事件处理程序
在Javascript的DOM中,关于事件Event对象的知识是一定要掌握的.Event对象模型主要分为两个部分,一个是Event对象本身具有的属性和方法,这个参照API就可以学得:另一个是在DOM节 ...
- [转]as3事件流机制彻底理解
题记: 看过网上一些as3事件流的教程,觉得大多都讲得不甚清楚,让人不能直观的理解事件流.而这篇教程以将事件流过程比喻成捕鱼过程,形象简单. 在此基础上对于as3事件流总算有了全面的理解.事件流机制说 ...
- JavaScript DOM高级程序设计 4.3控制事件流和注册事件侦听器--我要坚持到底！
一.事件流 我们通过下面一个实例,进行说明. <body> <h1>Event Flow</h1> <ul id="nav"> &l ...
- Dom事件流、冒泡、捕获
Dom事件流 dom的结构是一个倒立的树状结构.当一个html元素触发事件时,事件会在dom的根节点和触发事件的元素节点之间传播,中间的节点都会收到该事件. 捕获:div元素触发事件时,事件先从根节点 ...
- 漫谈DOM 事件流的三个阶段
一丶 流 什么是流? 比如 react 中的单项数据流,Node.js 中的流,或者本文中的 DOM 事件流,都是流的具体体现.专业地讲,流是程序输入或输出的一个连续的字节序列:通俗地讲,流是有方向的 ...
- 关于DOM事件流、DOM0级事件与DOM2级事件
一.DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window 二.流 流的概念,在现今的 JavaScript 中随处可见.比 ...
- 理解DOM事件流的三个阶段
本文主要解决两个问题: 1.什么是事件流 2.DOM事件流的三个阶段 事件流之事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张 ...
- 深入理解DOM事件机制系列第一篇——事件流
× 目录 [1]历史 [2]事件冒泡 [3]事件捕获[4]事件流 前面的话 javascript操作CSS称为脚本化CSS,而javascript与HTML的交互是通过事件实现的.事件就是文档或浏览器 ...
随机推荐
- Azure 自动化里添加ResourceManager模块
最近想尝试通过Azure里的自动化功能来控制VM的定时开关机,找到网上的一篇文章, 按照文章操作到"Import Azure Resource manager module"的第 ...
- linux 截图利器-scrot
一.前言 linux下截图工具有很多,scrot无疑是众多工具中的一个亮点,下面记录下其安装配置过程 二.使用环境 操作系统: centos 6.2 三.依赖 scrot依赖 giblib, gibl ...
- NoSql之旅--Cassandra安装篇(一)
有点迷茫了,头脑中只想起来一句话,"那就去学习吧". 我负责的项目中有一部分用到了Cassandra,当时也看过点,但是并没有太深入的了解,既然"学习劲头"正足 ...
- Codeforces Round #258 D Count Good Substrings --计数
题意:由a和b构成的字符串,如果压缩后变成回文串就是Good字符串.问一个字符串有几个长度为偶数和奇数的Good字串. 分析:可知,因为只有a,b两个字母,所以压缩后肯定为..ababab..这种形式 ...
- NGUI OnChange Event
那些组件有OnChange? 下面这些组件都有OnChange事件,当你点击,下拉选择时,就会触发它们. NGUI中对应的组件 PopupList (下拉列表) Toggle (复选框) Input ...
- linux服务器报Too many open files的解决方法
linux 上tomcat 服务器抛出socket异常“文件打开太多”的问题 java.net.SocketException: Too many open filesat java.net.Plai ...
- Mac下Android Studio中获取SHA1和MD5
有很多人讲这个的时候,老是只把这个代码标出来又不说为什么 keytool -list -keystore debug.keystore keytool 这个是java的 jdk中一个工具(做签名文 ...
- ABP入门系列（5）——创建应用服务
一.解释下应用服务层 应用服务用于将领域(业务)逻辑暴露给展现层.展现层通过传入DTO(数据传输对象)参数来调用应用服务,而应用服务通过领域对象来执行相应的业务逻辑并且将DTO返回给展现层.因此,展现 ...
- [解决方案]在Sql Server 2008/2005 数据库还原出现 3154错误
在Sql Server 2008/2005 数据库还原出现 3154错误 解决方法1:不要在数据库名字上点右键选择还原,而要是在根目录“数据库”三个字上点右键选择还原,然后再选择数据库,问题便可以解决 ...
- http请求过程
想象用浏览器打开imooc.com网站,HTTP走过的环节: 1.首先,是对imooc.com域名解析,(1.1)浏览器搜索浏览器自身的DNS缓存.(DNS(Domain Name System,域名 ...