JavaScript核心之事件高级学习笔记

1 注册事件（绑定事件）

1.1 注册事件概述

给元素添加事件，称为注册事件或者绑定事件。
注册事件有两种方式：传统方式和方法监听注册方式
传统注册方式
● 利用 on 开头的事件 onclick
● <button onclick=“alert('hi~')”></button>
● btn.onclick = function() {}
● 特点： 注册事件的唯一性
● 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
方法监听注册方式
● w3c 标准 推荐方式
● addEventListener() 它是一个方法
● IE9 之前的 IE 不支持此方法，可使用 attachEvent() 代替
● 特点：同一个元素同一个事件可以注册多个监听器
按注册顺序依次执行

1.2 addEventListener 事件监听方式

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

eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。
该方法接收三个参数：
● type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 on
● listener：事件处理函数，事件发生时，会调用该监听函数
● useCapture：可选参数，是一个布尔值，默认是 false。学完 DOM 事件流后，我们再进一步学习

1.3 attachEvent 事件监听方式

 eventTarget.attachEvent(eventNameWithOn, callback) 

eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象） 上，当该对象触发指定的事件时，指定的回调函数就会被执行。
该方法接收两个参数：
● eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on
● callback： 事件处理函数，当目标触发事件时回调函数被调用
注意：IE8 及早期版本支持

1.4 注册事件兼容性解决方案

 function addEventListener(element, eventName, fn) {
      // 判断当前浏览器是否支持 addEventListener 方法
      if (element.addEventListener) {
        element.addEventListener(eventName, fn);  // 第三个参数