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 相关文章推荐
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
利用javascript实现一些常用软件的下载导航
Aug 03 Javascript
javascript自定义startWith()和endWith()的两种方法
Nov 11 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
微信小程序swiper使用网络图片不显示问题解决
Dec 13 Javascript
解决vue中el-tab-pane切换的问题
Jul 19 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
用Zend Encode编写开发PHP程序
2006/10/09 PHP
PHP实现的日历功能示例
2018/09/01 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
PHP中的self关键字详解
2019/06/23 PHP
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
jQuery 选择同时包含两个class的元素的实现方法
2016/06/01 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
jupyter安装小结
2016/03/13 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
详解Python打包分发工具setuptools
2019/08/05 Python
Python调用.NET库的方法步骤
2019/12/27 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
解释下面关于J2EE的名词
2013/11/15 面试题
读群众路线心得体会
2014/03/07 职场文书
五好关工委申报材料
2014/05/31 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
春晚观后感
2015/06/11 职场文书
护士岗位竞聘书
2015/09/15 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
Golang的继承模拟实例
2021/06/30 Golang
python编程项目中线上问题排查与解决
2021/11/01 Python