javascript与dom编程（二）Event

- 

一：Event Handlder

一个Event Handlder就是嵌入DOM节点的JavaScript方法，当此节点发生事件时，那么它就会自动的被触发。如下图可以说明此概念。

 

例如： 

<p>The first captain of the USS Enterprise NCC-1701 was <a id="wikipedia"
          href="http://en.wikipedia.org/wiki/Christopher_Pike">Christopher
      Pike</a>.</p>

 

var wikipediaLink =
{
  init: function()
   {
    var link = document.getElementById("wikipedia");

    if (typeof link.addEventListener != "undefined")
     {
      link.addEventListener("click", wikipediaLink.clickListener, false);
    }
    else if (typeof link.attachEvent != "undefined")
     {
      link.attachEvent("onclick", wikipediaLink.clickListener);
    }
  },

  clickListener: function()
   {
    alert("Don't believe everything you read on Wikipedia!");
  }
};

Core.start(wikipediaLink);

A：Default Actions

     浏览器响应事件通常的做法。大多数情况下，我们希望如此，但是也有一些时候，答案是否定的。

     阻止Default Actions发生的最简单的方法就是为此event创建一个event handler，然后return false。例如：我们修改上面创建的clickListeners。

clickHandler: function()
   {
    if (!confirm("Are you sure you want to leave this site?"))
     {
      return false;
    }
  }

 B：this关键字

     当我们写一个event handler来关联到许多HTML中的元素时，那么this是一个不错的选择。它表现的有点像变量，但是我们不能给它赋值，它的值就是方法所执行的对象。例如：要打开所点击的URL。

var externalLinks =
{
  init: function()
   {
    var extLinks = Core.getElementsByClass("external");

    for (var i = 0; i < extLinks.length; i++)
     {
      extLinks[i].onclick = externalLinks.clickHandler;
    }
  },

  clickHandler: function()
   {
    open(this.href);
    return false;
  }
};

Core.start(externalLinks);

C：Event handler的缺陷。

     对一个html的元素，只能分配给它一个event handler，否则前面的event handler会不起作用，也就是被后面的所取代。

二：Event Listeners

     Event Listeners和Event handler比较相似，它也是嵌到dom节点里的JavaScript方法，但是我们可以分配许多的Event Listeners给一个HTML元素。如图所示。

     创建一个Event Listeners的代码：element.addEventListener("event", eventListener, false);第三个参数为true时，表示事件传播的时候出发该事件，false时则不考虑事件传播。在IE浏览器下，创建的代码：element.attachEvent("onevent", eventListener)；清除event handler的代码分别是：element.removeEventListener("event", eventListener, false);element.detachEvent("onevent", eventListener);

     在使用的时候，我们需要进行判断来保证对不同的浏览器使用正确的方法。例如：

  <p>The first captain of the USS Enterprise NCC-1701 was <a id="wikipedia"
          href="http://en.wikipedia.org/wiki/Christopher_Pike">Christopher
      Pike</a>.</p>

 

var wikipediaLink =
{
  init: function()
   {
    var link = document.getElementById("wikipedia");

    if (typeof link.addEventListener != "undefined")
     {
      link.addEventListener("click", wikipediaLink.clickListener, false);
    }
    else if (typeof link.attachEvent != "undefined")
     {
      link.attachEvent("onclick", wikipediaLink.clickListener);
    }
  },

  clickListener: function()
   {
    alert("Don't believe everything you read on Wikipedia!");
  }
};

Core.start(wikipediaLink);

A：Default Actions

     为了阻止Default Actions，我们使用preventDefault方法，在IE浏览器中，我们使用returnValue。例如：

var wikipediaLink =
{
  init: function()
   {
    var link = document.getElementById("wikipedia");

    if (link.addEventListener)
     {
      link.addEventListener("click", wikipediaLink.clickListener, false);
    }
    else if (link.attachEvent)
     {
      link.attachEvent("onclick", wikipediaLink.clickListener);
    }
  },

  clickListener: function(event)
   {
    if (typeof event == "undefined")
     {
      event = window.event;
    }

    if (!confirm("Are you sure you want to leave this site?"))
     {
      if (typeof event.preventDefault != "undefined")
       {
        event.preventDefault();
      }
      else
       {
        event.returnValue = false;
      }
    }
  }
};

Core.start(wikipediaLink);

注：在IE中，event作为window对象的一个属性，可以直接使用，而在firefox中，需要通过传参的方式来传播事件。

B：事件传播

     事件传播分为3个阶段：

     1：捕获阶段。事件会沿着dom树，访问每一个节点，直到到达目标元素。但是在IE浏览器中没有此阶段，其实大多数开发者都避免使用capturing event listeners。

     2：结果程序执行阶段。浏览器要找分配到目标节点上的Event Listeners，然后执行它。

     3：事件冒泡阶段