DOM事件探秘
DOM事件
一、事件流
冒泡事件：
捕获事件：
二、HTML事件处理程序：事件直接加在HTML结构里面
举例：<input type=”button” value=”按钮” onclick=”alert(‘hello’)”>;
或者直接用
<input type=”button” value=”按钮” onclick=”showMessage()”>
<script type=”text/javascript”>
function() showMessage(){
alert(‘hello’);
}
</script>
HTML事件缺点：HTML和JS代码紧密的耦合在一起，如果要更改事件处理程序，需要更改HTML和JS里面都改，很不方便。
三、DOM０级事件处理程序
较传统的方式，把一个函数直接赋值给一个事件处理程序的属性（使用比较多，简单，并且具有跨浏览器的优势。）
<input type=”button” value=”按钮2” id=”btn2” >
<script type=”text/javascript”>
var btn2=document.getElementById(‘btn2’);//这样便取得了btn2按钮。
btn2.onclick=function(){
alert(‘这是通过dom0级事件处理程序添加的事件)；
}//给btn2添加了一个onclick属性。
btn2.onclick=null//删除onclick属性。
</script>
//此时需要更改便可直接在此处更改，不需要再次在HTML中更改了。
四、DOM2级事件处理程序（在IE中不兼容，IE中有自己的事件处理程序）
定义了两个方法：
用于处理和删除事件处理程序的操作—— addEnventListner()和removeEventListner()。
并且接收三个参数（要处理的事件名、作为事件处理程序的函数、布尔值true捕获false冒泡，通常用冒泡）
<input type=”button” value=”按钮2” id=”btn3 onclick=”showMessage()”>
<script type=”text/javascrip>
//DOM2级事件
bn3. addEnventListner(‘click’,showMessage,false);//添加事件，注意要去掉on。例如onmouseover更换为mouseover
function() showMessage(){
alert(‘hello’);
}
//添加多个事件处理程序
bn3. addEnventListner(‘click’，function(){
alert(this.value)；/此处this代表选中的元素。
}，false）
//添加删除事件的时候传递的参数需要与添加事件时候设置的参数相同，并且用addEnventListner（）添加的事件只能用removeEventListner()删除而不能用（元素.事件=null）删除。
bn3. RemoveEventListner(‘click’,showMessage,false);
</script>
优点：DOM0级和DOM2级都可以给一个元素添加多个事件处理程序。按顺序来执行。也可以添加多个事件
五、IE事件处理程序以及跨浏览器解决
1、给IE添加事件处理程序
attachEvent()添加事件detachEvent()删除事件
接收相同的两个参数：事件处理程序的名称，和事件处理程序的函数。
不再需要布尔值的原因：IE8以及更早的浏览器版本只支持冒泡。
<input type=”button” value=”按钮3 id=”btn3 >
<script type=”text/javascript”>
var btn3=document.getElementById(‘btn3’);//这样便取得了btn2按钮。
function() showMessage(){
alert(‘hello’);
}
btn3.attachEvent(‘onclick’,showMessage);//添加事件处理程序，注意写法上加上了“on”
btn3.detachEvent(‘onclick’,showMessage);//删除了事件处理程序
</script>
2、跨浏览器事件处理程序
把事件封装在一个对象内
<script type=”text/javascript>”
<input type=”button” value=”按钮3 id=”btn3 >
var btn3=document.getElementById(‘btn3’);//这样便取得了btn2按钮。
function() showMessage(){
alert(‘hello’);
}
var eventUtil={
//添加句柄element元素，type事件，handler函数
addHandler:function(element,type,handler){
//默认type类型写法无“on”
//DOM2级事件处理程序
if(element.addEventlistner){
element.addEventlistner(type,handler,false);
}
//IE事件处理程序
else if(element.attachEvent){
element.attachEvent(‘on’+type,haneler);//在IEtype类型写法上加‘on’
}
//非dom2和IE
else{
element[‘on’+type]=handler；//在js中所有的.都可以用[]代替
}
}
//删除句柄
removeHandler:function(element,type,handler){
if(element.removeEventlistner){
element. removeEventlistner(type,handler,false);
}
else if(element.detachEvent){
element.detachEvent(‘on’+type,haneler);
}
else{
element[‘on’+type]=null；//在js中所有的.都可以用[]代替
}
}
}
//调用事件处理程序封装函数
eventUtil.addHandler(btn3,’click’,showMessage);//因为默认设置type类型没有on
eventUtil.removeHandler(btn3,’click’,showMessage);
</script>
六、事件对象
1、DOM事件对象（对IE不适用）
(1)、type属性用于获取事件类型（onclick ，onmouseover等）
（2）、target 属性 事件加在哪个目标上。（例如object.target.nodeName获取节点名称）
（3）、stopPropagation（）方法 用于阻止事件冒泡
（4）、preventDefault() 方法 用于阻止事件的默认行为
<script type=”text/javascript”>
<div id=”box”>
<input type=”button” value=”按钮3 id=”btn3 >
<a href=”#” id=”go”>跳转</a>
</div>
var box=document.getElementById(‘box’);
var btn3=document.getElementById(‘btn3’);//这样便取得了btn2按钮。
var go=document.getElementById(‘go’);
function stopGoto(event){
event.stopPropagation();//阻止冒泡；
event.preventDefault();//阻止事件的默认行为，在此即是阻止a链接的跳转。
}
function showbox(){
alert(‘这是封装按钮的盒子’)；
}
function showMessage(event){
alert(event.type);//添加了event事件。
event.stopPropagation();//阻止冒泡；
}
var eventUtil={
//添加句柄element元素，type事件，handler函数
addHandler:function(element,type,handler){
//默认type类型写法无“on”
//DOM2级事件处理程序
if(element.addEventlistner){
element.addEventlistner(type,handler,false);
}
//IE事件处理程序
else if(element.attachEvent){
element.attachEvent(‘on’+type,haneler);//在IEtype类型写法上加‘on’
}
//非dom2和IE
else{
element[‘on’+type]=handler；//在js中所有的.都可以用[]代替
}
}
//删除句柄
removeHandler:function(element,type,handler){
if(element.removeEventlistner){
element. removeEventlistner(type,handler,false);
}
else if(element.detachEvent){
element.detachEvent(‘on’+type,haneler);
}
else{
element[‘on’+type]=null；//在js中所有的.都可以用[]代替
}
}
}
//调用事件处理程序封装函数
eventUtil.addHandler(btn3,’click’,showMessage);//因为默认设置type类型没有on
eventUtil.addHandler(box,’click’,showbox);//给box添加鼠标点击事件。
eventUtil.addHandler(go,’click’,stopGoto);
//eventUtil.removeHandler(btn3,’click’,showMessage);
</script>
2、IE事件对象
（1）、type属性 用于获取事件类型
（2）、srcElement属性用于获取事件的目标。类似于dom中的target。
用法:（解决浏览器不兼容 的问题。）
function showMessage(event){
event=event||window.event;//IE8之前用的是window.event .
var ele=event.target||event.srcElement;
alert(ele);
}
(3)、cancelBubble属性 用于阻止事件冒泡。设置为true阻止冒泡，设置为false不阻止冒泡。
将封装的event函数，独立为一个js文件，方便以后使用。(已经考虑兼容性)
var eventUtil={
//添加句柄element元素，type事件，handler函数
addHandler:function(element,type,handler){
//默认type类型写法无“on”
//DOM2级事件处理程序
if(element.addEventlistner){
element.addEventlistner(type,handler,false);
}
//IE事件处理程序
else if(element.attachEvent){
element.attachEvent(‘on’+type,haneler);//在IEtype类型写法上加‘on’
}
//非dom2和IE
else{
element[‘on’+type]=handler；//在js中所有的.都可以用[]代替
}
}
//删除句柄
removeHandler:function(element,type,handler){
if(element.removeEventlistner){
element. removeEventlistner(type,handler,false);
}
else if(element.detachEvent){
element.detachEvent(‘on’+type,haneler);
}
else{
element[‘on’+type]=null；//在js中所有的.都可以用[]代替
}
}
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;
}
}
stopPropagation:function(event){
if(event.stopPropagation){
evetn.stopPrapagation();
}else{
event.cancelBubble=true
}
}
}
