DOM事件流、事件处理程序以及事件对象

最新推荐文章于 2021-03-20 00:07:09 发布

Kongkong_nana

最新推荐文章于 2021-03-20 00:07:09 发布

阅读量423

点赞数

分类专栏： web开发文章标签： javascript DOM 事件事件对象事件处理程序

本文链接：https://blog.csdn.net/NA_SAMA/article/details/50939130

版权

web开发专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、事件流：描述的是从页面中接受事件的顺序。

IE：事件冒泡流

NetScape：事件捕获流

事件冒泡：即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。

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

二、事件处理程序：

1、HTML事件处理程序

弊端：JS代码和HTML都需要进行修改

<pre name="code" class="html"><html>
    <head>
        <title>事件流</title>
        <meta charset="UTF-8">
    </head>
<body>
<div>
    <input type="button" value="按钮" οnclick="showMes()">
</div>
</body>
<script>
    function showMes(){
        alert('hello world');
    }
</script>
</html>

2、DOM0级处理程序

是比较传统的方式：把一个函数赋值给一个事件的处理程序属性，用的比较多，简单，具有跨浏览器的优势

<html>
    <head>
        <title>事件流</title>
        <meta charset="UTF-8">
    </head>
<body>
<div>
    <input type="button" value="按钮" id="btn2">
</div>
</body>
<script> 
    var btn2=document.getElementById("btn2");//取得btn2的对象
    btn2.οnclick=function(){//添加属性
        alert('通过DOM0级添加的事件!');
    }
    btn2.οnclick=null;//删除onclick属性
</script>
</html>

3、DOM2级处理程序

定义了两个方法：

用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener().接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值（true是捕获阶段处理程序，false是冒泡处理程序）

0级和2级可以添加多个事件。

<html>
    <head>
        <title>事件流</title>
        <meta charset="UTF-8">
    </head>
<body>
<div>
    <input type="button" value="按钮1" id="btn1" οnclick="showMes()">
    <input type="button" value="按钮2" id="btn2">
    <input type="button" value="按钮3" id="btn3">
</div>
</body>
<script>
    function showMes(){
        alert('hello world');
    }
    var btn2=document.getElementById("btn2");//取得btn2的对象
    btn2.οnclick=function(){//添加属性
        alert('通过DOM0级添加的事件!');
    }
    btn2.οnclick=null;//删除onclick属性

    var btn3=document.getElementById("btn3");
    btn3.addEventListener('click',showMes,false);//去掉on
    btn3.addEventListener('click',function(){
        alert(this.value);

    },false);
    btn3.removeEventListener('click',showMes,false);//删除事件
</script>
</html>
4、IE事件处理程序

attachEvent()添加事件 detachEvent()删除事件

接受相同的两个参数：事件处理程序的名称和事件处理程序的函数，不适用第三个参数的原因：IE8以及更早的浏览器版本只支持冒泡.IE和Opera大致相同btn3.attachEvent('onclick',showMes);
btn3.detachEvent('onclick',showMes);
5、跨浏览器的事件处理程序

<pre name="code" class="html"><html>
    <head>
        <title>事件流</title>
        <meta charset="UTF-8">
    </head>
<body>
<div>
    <input type="button" value="按钮1" id="btn1" οnclick="showMes()">
    <input type="button" value="按钮2" id="btn2">
    <input type="button" value="按钮3" id="btn3">
</div>
</body>
<script>
    function showMes(){
        alert('hello world');
    }
    var btn2=document.getElementById("btn2");//取得btn2的对象

    btn2.οnclick=function(){//添加属性
        alert('通过DOM0级添加的事件!');
    }

    var btn3=document.getElementById("btn3");
    var eventUtil={
        //添加句柄
        addHandler:function(element,type,handler){
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }else if(element.attachEvent){
                element.attachEvent('on'+type,handler);
            }else{
                element['on'+type]=handler;
            }
        },
        // 删除句柄
        removeHandler:function(element,type,handler){
            if(element.removeEventListener){
                element.removeEventListener(type,handler,false);
            }else if(element.detachEvent){
                element.detachEvent('on'+type,handler);
            }else{
                element['on'+type]=null;
            }
        }

    }
    eventUtil.addHandler(btn3,'click',showMes);


</script>
</html>


三、事件对象

定义：在触发DOM上的事件时都会产生一个对象

事件对象event

1、DOM中的事件对象

(1)、type属性 用于获取事件类型

(2)、target属性 用于获取事件目标

(3)、stopPropagation()方法 用于阻止事件冒泡

(4)、preventDefault()方法 阻止事件的默认行为

<a href='#'>超链接</a>

<html>
    <head>
        <title>事件流</title>
        <meta charset="UTF-8">
    </head>
<body>
<div id="box">
    <input type="button" value="按钮1" id="btn1" οnclick="showMes()">
    <input type="button" value="按钮2" id="btn2">
    <input type="button" value="按钮3" id="btn3">
    <a href="http://www.baidu.com" id="go">跳转</a>
</div>
</body>
<script>
    function showMes(event){
        alert(event.target.nodeName);
        event.stopPropagation();//阻止事件冒泡
    }
    function showBox(){
         alert('这是放按钮的盒子box');
    }
    function stopGoto(event){
        event.stopPropagation();
        event.preventDefault();//阻止事件默认行为
    }
    var btn2=document.getElementById("btn2");//取得btn2的对象

    btn2.οnclick=function(){//添加属性
        alert('通过DOM0级添加的事件!');
    }

    var btn3=document.getElementById("btn3");
    var box=document.getElementById("box");
    var go=document.getElementById("go");
    var eventUtil={
        //添加句柄
        addHandler:function(element,type,handler){
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }else if(element.attachEvent){
                element.attachEvent('on'+type,handler);
            }else{
                element['on'+type]=handler;
            }
        },
        // 删除句柄
        removeHandler:function(element,type,handler){
            if(element.removeEventListener){
                element.removeEventListener(type,handler,false);
            }else if(element.detachEvent){
                element.detachEvent('on'+type,handler);
            }else{
                element['on'+type]=null;
            }
        }

    }
    eventUtil.addHandler(btn3,'click',showMes);
    eventUtil.addHandler(box,'click',showBox);
    eventUtil.addHandler(go,'click',stopGoto);


</script>
</html>

2、IE中的事件对象

(1)、type属性 用于获取事件类型
(2)、srcElement属性 用于获取事件目标
(3)、cancelBubble属性 设置true表示阻止冒泡 false表示不阻止冒泡
(4)、returnValue属性 阻止事件的默认行为 设置为false表示阻止事件的默认行为
封装好的事件
var eventUtil={
        //添加句柄
        addHandler:function(element,type,handler){
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }else if(element.attachEvent){
                element.attachEvent('on'+type,handler);
            }else{
                element['on'+type]=handler;
            }
        },
        // 删除句柄
        removeHandler:function(element,type,handler){
            if(element.removeEventListener){
                element.removeEventListener(type,handler,false);
            }else if(element.detachEvent){
                element.detachEvent('on'+type,handler);
            }else{
                element['on'+type]=null;
            }
        },
        //获取事件
        getEvent:function(event){
            return event?event:window.event;
        },
        //获取事件类型
        getType:function(event){
            return event.type;
        },
        //获取事件元素
        getElement:function(event){
            return event.target || event.srcElement;
        },
        //阻止默认行为
        preventDefault:function(event){
            if (event.preventDefault){
                event.preventDefault();
            }else{
                event.returnValue=false;
            }
        },
        stopPropaga:function(event){
            if (event.stopPropagation){
                event.stopPropagation();
            }else {
                event.cancelBubble=true;
            }
        }

    }