浏览器注册事件及其兼容问题

注册事件（三种方式）

on的方式

语法：事件源.on+事件类型 = 事件处理程序

缺点：只能注册一次同类型的事件，如果多次注册，会覆盖(赋值的方式容易被后面注册的事件覆盖)

      btn.onclick = function() {
        //ul.removeChild(li5);   
          ul.removeChild(ul.children[ul.children.length-1]);
      }

addEventListener的方式 -- 添加事件监听

语法：事件源.addEventListener("事件类型",事件处理程序,false); (false可有可无)

优点：不会出现覆盖问题，协同工作的时候推荐使用
兼容：ie8及以下浏览器不支持

close[i].addEventListener('click', function () {
    this.parentNode.parentNode.style.display = 'none';
})

attachEvent的方式

语法：事件源.attachEvent("on"+事件类型,事件处理程序函数)
兼容：只有ie5~ie10支持，ie11开始放弃，不支持主浏览器

btn.attachEvent('onclick',function(){
    console.log(123);
})

封装浏览器兼容问题的函数

    /* * 一般是函数的功能： 兼容的注册事件
     * @param element 要注册事件的元素对象
     * @param type      要注册的事件类型
     * @param callback  事件的处理程序
     */
    function addEvent(element,type,callback){
      //判断要注册事件的元素是否可以通过addEventListener来注册
      if(element.addEventListener != undefined){
          //可以，执行这一步
           element.addEventListener(type,callback,false);
       }
          //不可以 ， 判断要注册事件的元素是否可以通过attachEvent 来注册
        else if( element.attachEvent != undefined){
            //可以使用attachEvent 来注册
            element.attachEvent('on'+type,callback);
        }
    }

    /* != undefined  可以不写*/

移除事件(三种方式)

on的方式移除

语法：事件源.on+事件类型 = null

//使用on的移除事件
btn.onclick = function(){
    console.log(123);
    this.onclick = null;
}

addEventListener的方式移除

语法：事件源.removeEventListener(事件类型,要移除的函数名)

//   使用removeEventListener移除事件
function fn2(){
    console.log(456);
    this.removeEventListener('click',fn2,false);
}

attachEvent的方式移除

语法：事件源.detachEvent("on"+事件类型,函数名)

//使用detachEvent移除事件
var fn = function(){
    console.log(123);
}
function fn2(){
    console.log(456);
    btn.detachEvent('onclick',fn2);
}
btn.attachEvent('onclick',fn);
btn.attachEvent('onclick',fn2);