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 相关文章推荐
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 Javascript
JavaScript实现动态生成表格
Aug 02 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对象和数组相互转换的方法
2015/05/12 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
JS判断数组那点事
2017/10/10 Javascript
详解redux异步操作实践
2018/08/15 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
Python正则捕获操作示例
2017/08/19 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
本科生求职信
2014/06/17 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
妈妈活动方案
2014/08/15 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
留学推荐信英文范文
2015/03/26 职场文书
纪录片信仰观后感
2015/06/08 职场文书
使用python创建股票的时间序列可视化分析
2022/03/03 Python