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中“+=”的应用
Feb 02 Javascript
javascript动画效果类封装代码
Aug 28 Javascript
10个新的最有前途的JavaScript框架
Mar 12 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 Javascript
jQuery Ajax使用实例
Apr 16 Javascript
javascript中call apply 与 bind方法详解
Mar 10 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
微信小程序API—获取定位的详解
Apr 30 Javascript
vue组件开发之slider组件使用详解
Aug 21 Javascript
Vue组件简易模拟实现购物车
Dec 21 Vue.js
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
提问的智慧(2)
2006/10/09 PHP
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
javascript实现连续赋值
2015/08/10 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
打架检讨书100字
2014/01/08 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
顶岗实习计划书
2015/01/16 职场文书
学历证明样本
2015/06/16 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python