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 相关文章推荐
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 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新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
javascript的事件描述
2006/09/08 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
nginx配置React静态页面的方法教程
2017/11/03 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
基于JS实现web端录音与播放功能
2019/04/17 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
Python reduce()函数的用法小结
2017/11/15 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
如何用python免费看美剧
2020/08/11 Python
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
班会关于环保演讲稿
2013/12/29 职场文书
幼儿园大班新学期寄语
2014/01/18 职场文书
青春演讲稿范文
2014/05/08 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
专业见习报告范文
2014/11/03 职场文书
学年个人总结范文
2015/03/05 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
欢送会主持词
2015/07/01 职场文书
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS