瀏覽器注冊事件及其兼容問題

注冊事件(三種方式)

on的方式

語法:事件源.on+事件類型 = 事件處理程序

缺點:只能注冊一次同類型的事件,如果多次注冊,會覆蓋(賦值的方式容易被后面注冊的事件覆蓋)

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

addEventListener的方式 -- 添加事件監(jiān)聽

語法:事件源.addEventListener("事件類型",事件處理程序,false); (false可有可無)

優(yōu)點:不會出現(xiàn)覆蓋問題,協(xié)同工作的時候推薦使用
兼容:ie8及以下瀏覽器不支持

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

attachEvent的方式

語法:事件源.attachEvent("on"+事件類型,事件處理程序函數(shù))
兼容:只有ie5~ie10支持,ie11開始放棄,不支持主瀏覽器

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

封裝瀏覽器兼容問題的函數(shù)

    /* * 一般是函數(shù)的功能: 兼容的注冊事件
     * @param element 要注冊事件的元素對象
     * @param type      要注冊的事件類型
     * @param callback  事件的處理程序
     */
    function addEvent(element,type,callback){
      //判斷要注冊事件的元素是否可以通過addEventListener來注冊
      if(element.addEventListener != undefined){
          //可以,執(zhí)行這一步
           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(事件類型,要移除的函數(shù)名)

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

attachEvent的方式移除

語法:事件源.detachEvent("on"+事件類型,函數(shù)名)

//使用detachEvent移除事件
var fn = function(){
    console.log(123);
}
function fn2(){
    console.log(456);
    btn.detachEvent('onclick',fn2);
}
btn.attachEvent('onclick',fn);
btn.attachEvent('onclick',fn2);
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。