DOM事件流、事件处理程序以及事件对象
一、事件流：描述的是从页面中接受事件的顺序。
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>是比较传统的方式：把一个函数赋值给一个事件的处理程序属性，用的比较多，简单，具有跨浏览器的优势
<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; } } }