当前位置主页 > 资料库 > 前端教程 > jQuery教程-jQuery事件模型

jQuery教程-jQuery事件模型

2016-02-24

在研究jQuery的事件模型之前,我们有必要先来研究一下浏览器的事件模型。浏览器的第一个事件模型是由网景公司引入的,通常我们称之为DOM0级事件模型。2000年11月,W3C组织制定了DOM2级事件模型,各个主流的浏览器厂商都支持DOM2级事件模型,但是IE浏览器却不完全支持,而是采用它自己的一套事件模型机制。

DOM0级事件模型

DOM0级事件模型是最基本的事件模型,在这个事件模型中,事件处理程序是通过把函数实例的引用指派到DOM元素的属性上声明的。例如使用onclick属性来处理鼠标的点击事件,使用onmouseover属性来处理鼠标的滑过事件。

默认情况下,DOM0事件模型会产生事件冒泡。例如下面的例子:

<html lang="zh" id="html" class="demo">
<head>
  <meta charset="UTF-8">
  <title>事件冒泡</title>
</head>
<body id="body" class="demo">
  <div id="parent" class="demo">
    <div id="child">
      <button id="btn" class="demo">点击一下</button>
    </div>
  </div>
</body>
</html>                              
                            
$(function(){
   //获取所有元素的引用
  var allElements = $("*");
  allElements.each(function(){
    //在所有元素上分别执行DOM0级的鼠标点击事件
    this.onclick = function(event){
      //1、获取事件发生的目标
      //需要根据不同的浏览器进行判断来获取event对象
      event = event?event:window.event;
      //alert(event);
      //2、获取事件的目标
      target = event.target?event.target:event.srcElement;
      console.info("事件源(id):"+target.id+",事件目标名称:"+target.tagName+",事件对象的ID:"+this.id);
    }
  });
});                              
                            

执行上面的代码可以在控制台上看到下面的结果:从上往下打印出来的元素分别是btn→child→parent→body→html。事件从被点击的按钮开始,一直向上冒泡到html根元素。

事件冒泡

关于DOM0级事件模型可以参看:JavaScript事件-DOM0级事件和DOM2级事件处理

DOM0级事件模型的最大缺点是事件会被覆盖。也就是说,相同元素的多个事件处理程序,只有最后一个会被执行,例如:

$(function(){
  $("#child")[0].onclick = function(){
    print("abc");
  }
  $("#child")[0].onclick = function(){
    print("xyz");
  }
  $("#child")[0].onclick = function(){
    print("kkk");
  }
});                             
                            

上面的代码中,只有最后一个鼠标点击事件会被执行。

DOM2级事件模型

为了解决DOM0级事件处理程序的问题,W3C组织制定了“DOM2级事件处理程序”。“DOM2级事件处理程序”定义了2个方法,用于处理指定和删除事件处理程序的操作,这2个方法是:addEventListenerremoveEventListener

关于DOM2级事件模型可以参看:JavaScript事件-DOM0级事件和DOM2级事件处理

DOM2级事件模型支持事件捕获。在DOM2级事件处理程序中,提供了第3个参数来控制使用事件冒泡还是事件捕获,例如:

btn.addEventListener("click",function(){
  console.info(this.id);
},true);                              
                            

当第3个参数设置为true时为事件捕获,为false时是事件冒泡。

IE浏览器不支持DOM2级事件处理程序,但是它有2个类似的方法:attachEvent()detachEvent()。由于IE浏览器只支持事件冒泡,所以通过attachEvent()添加的事件处理程序都会被添加到事件冒泡阶段。

jQuery事件模型

因为各个浏览器在处理事件的方法上存在如此大的差异,导致开发人员在编写js事件处理程序时非常吃力。jQuery事件模型屏蔽了浏览器之间的差异,它提供了如下的功能:

  • 提供简历事件处理程序的统一方法。
  • 允许在每一个元素上为每一个事件类型建立多个处理程序。
  • 采用标准的事件类型名称。
  • 使Event实例可用作处理程序的参数。
  • 对Event实例的最常用的属性进行规范化。
  • 为取消事件和阻塞默认操作提供了统一的方法。
相关阅读
Previous:
上一篇:jQuery教程-jQuery的实用方法介绍
Next:
下一篇:jQuery教程-jQuery的常用事件

我要评论

返回顶部