JavaScript学习笔记（五）——事件

DOM2级事件流

事件流描述的是从页面中接收事件的顺序，DOM2级事件规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

HTML事件处理程序

<script>
  function show(){
    alert("Hello!~");
  }
</script>
<input type="button" value="Click Me" onclick="showMessage()" />

缺点：

1. 时差问题导致的错误。如果在showMessage()函数有定义之前单击了按钮，就会引发错误。
2. 这样扩展事件处理程序的作用域链在不同浏览器中会导致不同的结果。
3. HTML与JavaScript代码紧密耦合。如果要更换事件处理程序，就要改动两个地方。

DOMO0级事件处理程序

事件处理程序在其所属元素的作用域内运行。

var btn = document.getElementById("button");
btn.onclick = function(){
  alert(this.id);// "button"
};

IE事件处理程序

事件处理程序在全局作用域内运行。

var btn = document.getElementById("button");
btn.attachEvent("onclick",function(){
  alert(this);// window
});

DOM2级事件处理程序

var btn = document.getElementById("button");
var action = function(){
  alert(this);
};
btn.addEventListener("click", action, false);// false表示在冒泡阶段调用事件处理程序；true表示在捕获阶段调用事件处理程序

btn.remoEventListener("click", action, false);

事件对象

在触发DOM上的某个事件，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。

var btn = document.getElementById("buton");
btn.addEventListener("click", function(event){
  alert(event.type); //"click"
},false);

阻止特定事件的默认行为，使用preventDefault()方法。

var link = document.getElementById("link");
link.onclick = function(event){
  event.preventDefault();
}

在需要用过一个函数处理多个事件时，可以使用type属性

var btn = document.getElementById("button");
var handler = function(event){
  switch(event.type){
    case "click":
      alert("Clicked");
      break;

    case "mouseover":
      event.target.style.backgroundColor = "red";
      break;

    case "mouseout":
      event.target.style.backgroundColor = "";
      break;
  }
};

btn.onclick = hander;
btn.onmouseover = handler;
btn.onmouseout = handler;

事件委托

对“事件处理程序过多” 问题的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类的所有事件。例如，click事件会一直冒泡到document层次，所以我们可以为整个页面制定一个onclick事件处理程序，而不必给每个可单机的元素分别添加事件处理程序。

HTML

<ul id="myLinks">
  <li id="a"></li>
  <li id="b"></li>
  <li id="c"></li>
</ul>

JavaScript

  var list = document.getElementById("myLinks");

  EventUtil.addHandler(list, "click", function(event){
    event = EventUtil.getEvent(event);

    switch(target.id){
      case "a":
        console.log("1");
        break;

      case "b":
        console.log("2");
        break;

      case "c":
        console.log("3"):
        break;
    }
  });