JS事件之DOM事件流

最新推荐文章于 2024-04-19 12:47:31 发布

cozia

最新推荐文章于 2024-04-19 12:47:31 发布

阅读量364

点赞数

分类专栏：事件流，事件处理程序，事件对象文章标签：事件流事件处理程序事件对象

本文链接：https://blog.csdn.net/cozia/article/details/55000889

版权

事件流，事件处理程序，事件对象专栏收录该内容

0 篇文章 0 订阅

订阅专栏

一：事件流

事件流指的是从页面中接受事件的顺序；

事件流又被分为两类：IE是事件冒泡流；非IE为事件捕获流；

事件冒泡：事件最开始由最具体的元素（文档中嵌套最深的节点元素）接受，逐级向上传播至文档中最不具体的文档节点，终点是document；

事件捕获：不太具体的节点应该最早接受到事件，而最具体的节点最后接受到事件；

eg：当我们点击button时，会依次弹出“button被点击”，“div被点击”，“body被点击”；（典型的事件冒泡）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body οnclick="alert('body被点击')">
    <div id="box" οnclick="alert('div被点击')" style="width: 50px;height: 50px;background:#000;">
        <button id="btn" οnclick="alert('button被点击')">按钮</button>
    </div>
</body>
</html>

二：使用事件处理函数：

1.html事件处理函数

像示例代码那样把事件处理函数直接写在html中，称为html事件处理函数；

通常我们不这样书写事件处理函数，缺点是html和js代码紧密的耦合在一起，还有就是js代码如果复杂，书写不便，且不够美观；

2.DOM 0级处理函数（跨浏览器兼容）

先把触发事件的元素取出来，让事件以对象属性的形式出现，添加事件处理事件；

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="box"  style="width: 50px;height: 50px;background:#000;">
    <button id="btn" >按钮</button>
</div>
</body>
<script>
    var btn=document.getElementById('btn');
    var box=document.getElementById('box');
    btn.οnclick=function(){
        alert("btn has been clicked");
    };
    box.οnclick=function(){
        alert("box has been clicked");
    }
</script>
</html>

3.DOM 2级事件处理事件

dom 2级事件定义了两个方法：

用于处理和删除指定事件处理程序的操作

非IE

addEventListener() 需要传入3个参数，分别是：事件类型type（click，mouseover...），事件处理函数fn，布尔值（true：事件捕获，false：事件冒泡）

removeEventListener() 需要传入3个参数，分别是：事件类型type（click，mouseover...），事件处理函数fn，布尔值（true：事件捕获，false：事件冒泡）

IE（默认事件冒泡）

attachEvent() 需要传入2个参数，分别是：事件类型type（onclick，onmouseover...），事件处理函数fn；

detachEvent() 需要传入2个参数，分别是：事件类型type（onclick，onmouseover...），事件处理函数fn；

4.实现跨浏览器的事件处理程序（恰当的使用能力检测）

function addEventhandler(ele,type,handler){
        if(ele.addEventListener){
            ele.addEventListener(type,handler,false);
        }else if(ele.attachEvent){
            ele.attachEvent("on"+type,handler);
        }else{
            ele['on'+type]=handler;
        }
    }
    function delEventhandler(ele,type,handler){
        if(ele.removeEventListener){
            ele.removeEventListener(type,handler,false);
        }else if(ele.detachEvent){
            ele.detachEvent("on"+type,handler);
        }else{
            ele['on'+type]=null;
        }
    }

三：事件对象（event||window.event）

事件对象的属性：

（1）type事件类型

（2）target 事件触发的目标节点 IE为srcElement

（3）stopPropagation()阻止事件冒泡(方法) IE为event.cancelBubble=true/false;(属性)

（4）preventDefault() 阻止事件的默认行为 (方法) IE为event.returnValue=true/false;(属性)

<a href='baidu.com'>baidu</a>

function getEvent(event){
        event=event||window.event;
    }
    function getSrcEle(event){
        return event.target||event.srcElement;
    }
    function preventDefault(){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue=false;
        }
    }
    function stopBubble(){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble=true;
        }
    }