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

来源：互联网发布：matlab 输出数组编辑：程序博客网时间：2024/06/09 23:05

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

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="按钮" onclick="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.onclick=function(){//添加属性        alert('通过DOM0级添加的事件!');    }    btn2.onclick=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" onclick="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.onclick=function(){//添加属性        alert('通过DOM0级添加的事件!');    }    btn2.onclick=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" onclick="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.onclick=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" onclick="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.onclick=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;            }        }    }

0 0