码迷,mamicode.com
首页 > 编程语言 > 详细

javascript 事件探索

时间:2015-01-28 19:48:08      阅读:298      评论:0      收藏:0      [点我收藏+]

标签:

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);
  });

}






javascript 事件探索

标签:

原文地址:http://blog.csdn.net/buyingfei8888/article/details/43234545

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!