javascript 事件探索

来源：互联网发布：健身大数据编辑：程序博客网时间：2024/05/16 01:40

1 事件流：

DOM同时支持两种事件模型：捕获型事件（非IE，从document 到具体元素）和冒泡型事件（IE，从具体元素到document）。

2 事件处理程序

html事件处理程序，简单点就是在html 元素上面直接绑定一个onclick 类似的事件，缺点显而易见是有太强的耦合性

<input type="button" value="按钮" id="btn" onclick="showMes()">

Dom0 级事件处理程序，类似于document.getById().onclick=function(){} 这样类似的

3 DOM2级事件处理程序

DOM2级事件定义了两个方法（非IE）：用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。

IE事件处理程序
attachEvent()添加事件
detachEvent()删除事件

4 事件对象
事件对象event
1、DOM中的事件对象
(1)、type:获取事件类型
(2)、target：事件目标
(3)、stopPropagation() 阻止事件冒泡
(4)、preventDefault() 阻止事件的默认行为
2、IE中的事件对象
(1)、type:获取事件类型
(2)、srcElement：事件目标
(3)、cancelBubble=true阻止事件冒泡
(4)、returnValue=false阻止事件的默认行为

下面通过一个具体例子来进行js封装和了解事件对象

index.html

<html> <head>   <title>事件流</title>   <meta charset="utf-8">   <script src="js/event.js"></script>   <script src="js/script.js"></script>   <body>      <div id="box">         <input type="button" value="按钮" id="btn" onclick="showMes()">         <input type="button" value="按钮2" id="btn2">         <input type="button" value="按钮3" id="btn3">         <a href="event.html" id="go">跳转</a>      </div>   </body> </head>

event.js

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;            }          },         stopPropagation:function(event){           if(event.stopPropagation){             event.stopPropagation();           }else{             event.cancelBubble=true;           }         }  }

script.js

window.onload=function(){  var go=document.getElementById('go'),      box=document.getElementById('box');  eventUtil.addHandler(box,'click',function(){  alert('我是整个父盒子');  });  eventUtil.addHandler(go,'click',function(e){  //e=eventUtil.getEvent(e);  e=e || window.event;  alert(eventUtil.getElement(e).nodeName);  eventUtil.preventDefault(e);  eventUtil.stopPropagation(e);  });}

0 0