首页 > 代码库 > javascript 事件探索

javascript 事件探索

2024-11-20 14:23:38   202人阅读

1 事件流：

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

2 事件处理程序

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

<input type="button" value=http://www.mamicode.com/"按钮" 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=http://www.mamicode.com/false阻止事件的默认行为


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

index.html

<html>
 <head>
   <title>事件流</title>
   <meta charset="utf-8">
   <script src=http://www.mamicode.com/"js/event.js"></script>>
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=http://www.mamicode.com/false;>
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 事件探索


联系
我们