DOM 事件流详解


Posted in Javascript onJanuary 20, 2015

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>

具体的执行顺序大家可测试。

以上就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
用脚本调用样式的几种方法
Dec 09 Javascript
JS 分号引起的一段调试问题
Jun 18 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
jquery实现树形二级菜单实例代码
Nov 20 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
分享纯手写漂亮的表单验证
Nov 19 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
vue router 配置路由的方法
Jul 26 Javascript
jQuery链使用指南
Jan 20 #Javascript
使用jQuery管理选择结果
Jan 20 #Javascript
javascript动态修改Li节点值的方法
Jan 20 #Javascript
js+css实现tab菜单切换效果的方法
Jan 20 #Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 #Javascript
js动态切换图片的方法
Jan 20 #Javascript
JavaScript 基本概念
Jan 20 #Javascript
You might like
php cout&amp;lt;&amp;lt;的一点看法
2010/01/24 PHP
php获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
vue源码nextTick使用及原理解析
2019/08/13 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
python中sets模块的用法实例
2014/09/30 Python
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
荷兰超市:DEEN
2018/03/14 全球购物
零件设计自荐信范文
2013/11/27 职场文书
文明风采获奖感言
2014/02/18 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
python cv2图像质量压缩的算法示例
2021/06/04 Python
vue elementUI批量上传文件
2022/04/26 Vue.js
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL