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（四）事件流的更多相关文章

  1. [已转移]IE事件流和DOM标准事件流的区别

    该文章已转移到博客:https://cynthia0329.github.io/ 1.执行的顺序不一样 冒泡型事件模型: button->div->body (IE事件流) 捕获型事件模型 ...

  2. JS事件流与DOM事件处理程序

    在Javascript的DOM中,关于事件Event对象的知识是一定要掌握的.Event对象模型主要分为两个部分,一个是Event对象本身具有的属性和方法,这个参照API就可以学得:另一个是在DOM节 ...

  3. [转]as3事件流机制彻底理解

    题记: 看过网上一些as3事件流的教程,觉得大多都讲得不甚清楚,让人不能直观的理解事件流.而这篇教程以将事件流过程比喻成捕鱼过程,形象简单. 在此基础上对于as3事件流总算有了全面的理解.事件流机制说 ...

  4. JavaScript DOM高级程序设计 4.3控制事件流和注册事件侦听器--我要坚持到底！

    一.事件流 我们通过下面一个实例,进行说明. <body> <h1>Event Flow</h1> <ul id="nav"> &l ...

  5. Dom事件流、冒泡、捕获

    Dom事件流 dom的结构是一个倒立的树状结构.当一个html元素触发事件时,事件会在dom的根节点和触发事件的元素节点之间传播,中间的节点都会收到该事件. 捕获:div元素触发事件时,事件先从根节点 ...

  6. 漫谈DOM 事件流的三个阶段

    一丶 流 什么是流? 比如 react 中的单项数据流,Node.js 中的流,或者本文中的 DOM 事件流,都是流的具体体现.专业地讲,流是程序输入或输出的一个连续的字节序列:通俗地讲,流是有方向的 ...

  7. 关于DOM事件流、DOM0级事件与DOM2级事件

    一.DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window 二.流 流的概念,在现今的 JavaScript 中随处可见.比 ...

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

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

  9. 深入理解DOM事件机制系列第一篇——事件流

    × 目录 [1]历史 [2]事件冒泡 [3]事件捕获[4]事件流 前面的话 javascript操作CSS称为脚本化CSS,而javascript与HTML的交互是通过事件实现的.事件就是文档或浏览器 ...

随机推荐

  1. Java + eclipse + awt 编写锻炼打字小软件（未完成）

    进入前界面: import java.awt.*; public class Welcome extends JFrame implements Runnable{ Thread t; private ...

  2. hadoop yarn configure

    <property>  <description>The minimum allocation for every container request at the RM,  ...

  3. Learning C Struct

    为什么需要结构体类型? 一种语言本身往往会提供一些最基本的数据类型,比如数字型(int,bigint,float,double等),字符型,日期型,布尔型等.但现实世界中,我们面对的对象总是非常复常, ...

  4. Docker与容器快速入门

    Docker之风席卷全球,但很多人觉得docker入门确实不太容易,其原因在于很多知识点上没准备好,在docker解决了什么问题.怎么解决的.用什么技术解决的都还没想清楚的时候就去探索docker组件 ...

  5. On Perseverance

    Brothers,I dont consider that I have made it my own.But one thing I do:forgetting what lies behind a ...

  6. 【温故而知新-Javascript】窗口效果 （全屏显示窗口、定时关闭窗口）

    1.全屏显示窗口 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  7. 2014 Super Training #1 F Passage 概率DP

    原题: HDU 3366   http://acm.hdu.edu.cn/showproblem.php?pid=3366 本来用贪心去做,怎么都WA,后来看网上原来是一个DP题. 首先按P/Q来做排 ...

  8. 权限框架 - shiro 自定义realm

    上篇文章中是使用的默认realm来实现的简单登录,这仅仅只是个demo,真正项目中使用肯定是需要连接数据库的 首先创建自定义realm文件,如下: 在shiro中注入自定义realm的完全限定类名: ...

  9. java 16-8 泛型高级之通配符

    泛型高级(通配符) ?:任意类型,如果没有明确,那么就是Object以及任意的Java类了 ? extends E:向下限定,E及其子类 ? super E:向上限定,E极其父类 import jav ...

  10. maya获取邻接顶点的一个问题

    maya网格数据结构允许"非流形"的存在,于是,这种数据结构无法按顺序给出一个点的邻接顶点. 于是,MItMeshVertex::getConnectedVertices函数返回的 ...