注册事件

addEventListener 的第三个参数为false的时候 ： 事件冒泡

addEventListener 的第三个参数为true的时候 ： 事件捕获

 

// 注册事件的第一种方式
// 无法给同一个对象的同一个事件注册多个事件处理函数
btn.onclick = function () {

}
// 浏览器兼容性问题  IE9以后才支持
btn.addEventListener('click', function () {
  alert('hello world');
})
// 第一个参数，事件的名称前要加 on
// ie6-10支持
btn.attachEvent('onclick', function () {
    alert('hello world');
 });

// 处理注册事件的兼容性问题
// eventName, 不带on，  click  mouseover  mouseout
function addEventListener(element, eventName, fn) {
// 判断当前浏览器是否支持addEventListener 方法
    if (element.addEventListener) {
        element.addEventListener(eventName, fn);  // 第三个参数 默认是false
    } else if (element.attachEvent) {
        element.attachEvent('on' + eventName, fn);
    } else {
        // 相当于 element.onclick = fn;
        element['on' + eventName] = fn;
    }
}

var btn = document.getElementById('btn');
btn.onclick = function () {
  alert('hello world');
  // 移除事件
  btn.onclick = null;
}

如果想要移除事件，注册事件的时候不能使用匿名函数
btn.addEventListener('click', function () {
  alert('hello world'); 
  // 移除事件
  btn.removeEventListener('click', )
});

function btnClick () {
  alert('hello world');
  // 移除事件
  btn.removeEventListener('click', btnClick);
}
btn.addEventListener('click', btnClick);
// 
// chrome 中不支持attachEvent。 IE9-10
function btnClick() {
  alert('hello world');
  // 移除事件
  btn.detachEvent('onclick', btnClick);
}
btn.attachEvent('onclick', btnClick);

// 处理移除事件的兼容性处理
function removeEventListener(element, eventName, fn) {
  if (element.removeEventListener) {
    element.removeEventListener(eventName, fn);
  } else if (element.detachEvent) {
    element.detachEvent('on' + eventName, fn);
  } else {
    element['on' + eventName] = null;
  }
}