首页 > 语言 > JavaScript > 正文

DOM 事件流详解

2024-05-06 14:47:13
字体:
来源:转载
供稿:网友

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()则是用来删除元素上的监听函数。它们的语法如下:

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选