常见问题当前位置:风暴娱乐 > 常见问题 > >

详解JavaScript中的事件流和事件处理程序

  

[JavaScript,事件流,事件处理程序]详解JavaScript中的事件流和事件处理程序

  

事件流:分两种,IE的是 事件冒泡流 ,事件开始时从最具体的元素接收,逐级向上传播到较为不具体的节点(Element -> Document)。与之相反的是 Netscape 的 事件捕获流 。

  

  

DOM2级事件规定事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。

  

  

大多数情况下都是将事件处理程序添加到事件流的冒泡阶段。一个 EventUtil 的栗子:  

  
  
  var EventUtil = {  addHandler: function(element, type, handler){  if(element.addEventListener){  element.addEventListener(type, handler, false);  }else if(element.attachEvent){  element.attachEvent('on' + type, handler); // IE8  }else{  element['on' + type] = handler;  }  },  removeHandler: function(){...}  }  
  
  

下面我们详细来看:  

  

DOM0级事件处理程序  
  
通过Javascript指定事件处理程序的传统方式,就是将一个函数赋值给一个事件处理程序属性。

  
  每个元素都有自己的事件处理程序属性,这些属性通常全部小写,例如onclick。将这种属性的值设置为一个函数,就可以指定事件处理程序。

  
  

  
  
  var btn = document.getElementById('myBtn');  // 添加事件处理程序  btn.onclick = function () {  alert( this );//为DOM元素btn  };  // 移除事件处理程序  btn.onclick = null;  
  
  

优点:1.简单2.具有跨浏览器的优势  
  缺点:在代码运行之前不会指定事件处理程序,因此这些代码在页面中位于按钮后面,就有可能在一段时间怎么点击都没反应,用户体验变差。

  

  

DOM2级事件处理程序  
  
定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。三个参数,1.要处理的事件名。2.作为事件处理程序的函数3.一个布尔值。最后这个布尔值为true,表示在捕获阶段调用事件处理程序,false表示在冒泡阶段调用事件处理程序。

  
  

  
  
  // 添加多个事件处理程序  var btn = document.getElementById('myBtn');  btn.addEventListener('click',function (){  alert( this );// 为DOM元素btn  },false );  btn.addEventListener('click',function () {  alert('Hello World');  },false);  // 移除事件处理程序  btn.removeEventListener('click',function () {  // 匿名函数无法被移除,移除失败  },false);  // 改写  var handler = function () {  alert(this.id);  };  btn.addEventListener('click',handler,false);  // 再次移除事件处理程序  btn.removeEventListener('click',handler,false);// 移除成功  
  
  

这两个事件处理程序会按照添加他们的顺序触发。大多数情况,都是将事件处理程序添加到事件流的冒泡阶段,这样可以最大限度的兼容各种版本的浏览器。

  

  

优点: 一个元素可以添加多个事件处理程序  
  缺点: IE8及以下浏览器不支持DOM2级事件处理程序。(包括IE8)  

  

IE事件处理程序  
  
定义了两个方法,与上类似:attachEvent(),detachEvent()。这两个方法接收相同的两个参数:事件处理程序名称和事件处理程序函数。由于IE8以及更早版本的浏览器只支持事件冒泡,所以通过detachEvent()添加的事件处理程序会被添加到冒泡阶段。

  
  

  
  
  var btn = document.getElementById('myBtn');  btn.attachEvent('onclick', function(){  alert( this );// window  });  btn.attachEvent('onclick', funciton(){  alert("HELLO, WORLD");  });  
  
  

点击按钮,这两个事件处理程序的触发顺序与上述刚好相反。不是按照添加事件处理程序的顺序触发,刚好相反。

  

  

优点:一个元素可以添加多个事件处理程序  
  缺点:只支持IE。

  

  

跨浏览器的事件处理程序  
  
  

  

eg:  

  
  
  var EventUtil = {  addHandler : function ( ele, type, handler ) {  if ( ele.addEventListener ) {  ele.addEventListener( type, handler, false );  } else if ( ele.attachEvent ) {  ele.attachEvent( 'on' + type, handler );  } else {  ele['on' + type] = handler  }  },  removeHandler: function ( ele, type, handler ) {  if ( ele.removeEventListener ) {  ele.removeEventListener( type, handler, false );  } else if ( ele.detachEvent ) {  ele.detachEvent( 'on' + type, handler );  } else {  ele[ 'on' + type ] = null;  }  }  }  

(责任编辑:admin)

上一篇:jQuery版仿Path菜单效果

下一篇:没有了

推荐内容

客户服务热线

010-400-12345

在线客服