事件流：DOM事件与IE事件，事件冒泡与事件捕获

最新推荐文章于 2024-09-05 23:28:05 发布

new_codeer

最新推荐文章于 2024-09-05 23:28:05 发布

阅读量285

点赞数

分类专栏： javascript 文章标签： dom 函数 js

本文链接：https://blog.csdn.net/new_codeer/article/details/50354576

版权

javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

事件冒泡：事件最开始由最具体的元素（文档中嵌套层次最深的节点）接受，然后逐级向上传播至最不具体的那个节点。
事件捕获：不太具体的节点更早接受到事件，而最具体的节点最后接受到事件。
事件处理程序：
1.HTML事件处理程序

<body>
    <script type="text/javascript">
        function showMes()
        {
            alert("hello word");
        }
    </script>
    <div id="box">
        <input type="button" id= "btn1" value="按钮" onclick ="showMes()">
    </div>
</body>

2.dom0级处理程序

<div id="box">
        <input type="button" id= "btn1" value="按钮" onclick ="showMes()">
        <input type="button" id= "btn2" value="按钮">
    </div>
    <script type="text/javascript">
        var btn2=document.getElementById("btn2");
        btn2.onclick=function()
        {
            alert("这是通过dom0级添加的事件！");
        }
    </script>

可以通过btn2.onclick=null;取消之前的设置

3.dom2级事件处理程序
addEventListener()方法和removeEventListener()方法：需要接收三个参数：要处理的事件名，作为事件处理程序的函数，布尔值

<div id="box">
        <input type="button" id= "btn1" value="按钮1" onclick ="showMes()">
        <input type="button" id= "btn2" value="按钮2">
        <input type="button" id= "btn3" value="按钮3">
    </div>
    <script type="text/javascript">
        var btn3=document.getElementById("btn3");
        btn3.addEventListener('click',showMes,false);
        //要处理的事件名中不可以包含'on'
        btn3.removeEventListener('click',showMes,false);
    </script>

通过dom0级和dom2级都可以添加多个事件，代码如下：

<script type="text/javascript">
        var btn3=document.getElementById("btn3");
        btn3.addEventListener('click',showMes,false);
        btn3.addEventListener('click',function(){
            alert(this.value);
        },false);
       // btn3.removeEventListener('click',showMes,false);
    </script>

4.IE事件处理程序（IE-8之前版本）
attachEvent()方法和detach()方法，接受两个相同的参数：要处理的事件名，作为事件处理程序的函数

<script type="text/javascript">
    var btn3=document.getElementById("btn3");
    btn3.attachEvent('onclick',showMes);
 </script>

事件对象：
1.dom中的事件对象：
1）type属性，获取事件类型
2）target属性，获取事件目标
3）stopPropagation()方法，用于阻止事件冒泡
4）preventDefault()方法，用于阻止事件的默认行为
2.IE中的事件对象：
1）type属性，获取事件类型
2）srcElement属性，获取事件目标
3）cancelBubble属性，用于阻止事件冒泡
4）returnedValue属性，用于阻止事件的默认行为