事件监听

1. addEventListener事件监听

• 语法：

 eventTarget.addEventListener(type, listener[, useCapture])  

• 注意：

  • addEventListener()事件监听（IE9以后支持）
  • eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

• 该方法接收三个参数：

  1. type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 on
  2. listener：事件处理函数，事件发生时，会调用该监听函数
  3. useCapture：可选参数，是一个布尔值，默认是 false。学完 DOM 事件流后，我们再进一步学习

2. attacheEvent()事件监听（IE678支持）

• 语法：

 eventTarget.attachEvent(eventNameWithOn, callback) 

• 注意：

eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象） 上，当该对象触发指定的事件时，指定的回调函数就会被执行。

• 该方法接收两个参数：

  1. eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on
  2. callback： 事件处理函数，当目标触发事件时回调函数被调用

• 案例：

<button>传统注册事件</button>
<button>方法监听注册事件</button>
<button>ie9 attachEvent</button>
<script>
    var btns = document.querySelectorAll('button');
    // 1. 传统方式注册事件
    btns[0].onclick = function() {
        alert('hi');
    }
    btns[0].onclick = function() {
            alert('hao a u');
        }
   // 2. 事件侦听注册事件 addEventListener 
   // (1) 里面的事件类型是字符串 必定加引号 而且不带on
   // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
    btns[1].addEventListener('click', function() {
        alert(22);
    })
    btns[1].addEventListener('click', function() {
            alert(33);
    })
    // 3. attachEvent ie9以前的版本支持
    btns[2].attachEvent('onclick', function() {
        alert(11);
    })
</script>