Tafsiran terperinci pengendalian acara merentas pelayar JavaScript_Pengetahuan asas

1. Perihal mendapatkan objek acara

FF agak degil dan hanya menyokong hujah[0] dan tidak menyokong window.event. Saya benar-benar tidak menyalahkan IE kali ini Walaupun menggunakan peristiwa sebagai atribut tetingkap adalah bertentangan dengan norma, semua orang telah pun akur dengan kewujudan masalah kecil ini. Oleh itu, terdapat dua cara untuk mendapatkan objek acara merentas pelayar:

Dengan ginseng:

getEvent : function(event){
  return event ? event : window.event;
  //return event || window.event;//或者更简单的方式
}

Tanpa ginseng:

function getEvent() {
  return arguments[0] ? arguments[0] : window.event;
  //return arguments[0] || window.event;//或者更简单的方式
}

Satu kaedah perlu dijelaskan khususnya: kaedah tahap DOM0 HTML, pengendali acara dengan parameter, seperti berikut:

function handler(event){
  //do something
}
<!-- HTML的DOM0级方式 --><br /><button id="btn" onclick="handler(event);">按钮</button><br />

Kaedah di atas serasi dengan semua penyemak imbas, tetapi kelemahan bergantung pada kaedah tahap DOM0 HTML adalah jelas, jadi ia tidak menjadi kaedah arus perdana seperti dua yang pertama, dan kaedah tahap DOM0 JS mempunyai pemprosesan acara dengan parameter , seperti berikut:

function handler(event){
  //do something
}
btn.onclick = handler;//JS的DOM0级方式
//btn.onclick = function(event){/*do something*/}//或者匿名函数，效果同上

Kaedah ini tidak serasi dengan semua penyemak imbas, [IE8-] tidak disokong, IE9 tidak diketahui, FF dan Chrome menyokongnya. Saya selalu berpendapat bahawa pemprosesan acara peringkat DOM0 HTML dan pemprosesan acara peringkat DOM0 JS adalah setara Sekarang saya telah melakukan banyak percubaan dan mendapati terdapat perbezaan antara kedua-dua

2. Perihal mendapatkan sumber acara

event.srcElement ialah satu-satunya kaedah untuk [IE8-], IE9 tidak diketahui, pelayar lain menyokong kaedah standard event.target

3. Perihal gelagat lalai untuk menyekat acara

event.preventDefault() ialah kaedah standard, tetapi [IE8-] tidak menyokong kaedah IE sendiri ialah event.returnValue = false;

4. Berkenaan menghentikan penyebaran acara

event.stopPropagation() ialah kaedah standard IE mempunyai bantahan yang lain jauh dari standard dan mudah digunakan

5. Perihal menambah dan mengalih keluar pengendali acara

Kaedah tahap DOM 0

ele.onclick = pengendali;ele.onclick=null;Cara tertua

Kelebihan: Serasi dengan semua penyemak imbas

Keburukan: Acara yang sama hanya boleh mengikat/menyahikat satu pengendali acara

Kaedah tahap DOM 2

ele.add/removeEventListener(eventType, handler, catch);

Dan mod IE: ele.attach/detachEvent(‘on’ eventType, pengendali);

Kelebihan: Menyokong mengikat/menyahikat beberapa pengendali acara

Kelemahan: Pertimbangan keserasian perlu dibuat. Perlu diingat bahawa parameter terakhir dalam kaedah standard menunjukkan sama ada untuk mengikat/menyahikat semasa fasa tangkapan peristiwa IE tidak menyokong tangkapan peristiwa, jadi tiada parameter ketiga

Nota: Dalam kaedah IE, bukan sahaja nama kaedah berbeza daripada standard, tetapi juga jenis acara dalam parameter mesti ditambah dengan on, jika tidak, pengikatan akan menjadi tidak sah tetapi tiada ralat akan dilaporkan

6. Pengendalian acara merentas pelayar

//跨浏览器的事件处理器添加方式
var EventUtil = {
  addHandler : function(elem, type, handler){
    if(elem.addEventListener){
      elem.addEventListener(type, handler, false);
    }
    else if(elem.attachEvent){
      elem.attachEvent("on" + type, handler);//添加多个同一类型的handler时，IE方式的规则是最后添加的最先触发
    }
    else{
      if(typeof elem["on" + type] === 'function'){
        var oldHandler = elem["on" + type];
        elem["on" + type] = function(){
          oldHandler();
          handler();
        }
      }
      else{
        elem["on" + type] = handler;//支持添加多个事件处理器
      }
    }
  },

  getEvent : function(event){
    return event ? event : window.event;
  },

  getTarget : function(event){
    return event.target || event.srcElement;
  },

  preventDefault : function(event){
    if(event.preventDefault){
      event.preventDefault();
    }
    else{
      event.returnValue = false;
    }
  },

  removeHandler : function(elem, type, handler){
    if(elem.removeEventListener){
      elem.removeEventListener(type, handler, false);
    }
    else if(elem.detachEvent){
      elem.detachEvent("on" + type, handler);
    }
    else{
      elem["on" + type] = null;//不支持移除单一事件处理器，只能全部移除
    }
  },

  stopPropagation : function(event){
    if(event.stopPropagation){
      event.stopPropagation();
    }
    else{
      event.cancelBubble = true;
    }
  },

  getRelatedTarget : function(event){
    if(event.relatedTarget){
      return event.relatedTarget;
    }
    else if(event.toElement && event.type == "mouseout"){
      return event.toElement;
    }
    else if(event.fromElement && event.type == "mouseover"){
      return event.fromElement;
    }
    else{
      return null;
    }
  },

  /*IE8点击左键和中键都是0；FF无法识别中键；Chrome正常*/
  getButton : function(event){//返回0，1，2 - 左，中，右
    if(document.implementation.hasFeature("MouseEvents", "2.0")){
      return event.button;
    }
    else{
      switch(event.button){
        case 0:case 1:case 3:case 5:case 7:
          return 0;
          break;
        case 2:case 6:
          return 2;
          break;
        case 4:
          return 1;
          break;
        default:
          break;
      }
    }
  },

  /*只能检测keypress事件，返回值等于将要显示的字符编码*/
  /*IE和Chrome只有能显示的字符键才触发，FF其它键也能触发，返回值为0*/
  getCharCode : function(event){
    if(typeof event.charCode == "number"){
      return event.charCode;
    }
    else{
      return event.keyCode;
    }
  }
};

Contoh yang komprehensif

Jika perpustakaan seperti jQuery tidak digunakan dalam projek, bagaimanakah seseorang boleh mengikat acara dengan mudah kepada elemen dan menjadikannya serasi dengan pelbagai pelayar? Utiliti mudah berikut harus dipertimbangkan.

var eventUtility = {
  addEvent : function(el, type, fn) {
    if(typeof addEventListener !== "undefined") {
      el.addEventListener(type, fn, false);
    } else if(typeof attachEvent !== "undefined") {
      el.attachEvent("on" + type, fn);
    } else {
      el["on" + type] = fn;
    }
  },

  removeEvent : function(el, type, fn) {
    if(typeof removeEventListener !== "undefined") {
      el.removeEventListener(type, fn, false);
    } else if(typeof detachEvent !== "undefined") {
      el.detachEvent("on" + type, fn);
    } else {
      el["on" + type] = null;
    }
  },

  getTarget : function(event) {
    if(typeof event.target !== "undefined") {
      return event.target;
    } else {
      return event.srcElement;
    }
  },

  preventDefault : function(event) {
    if(typeof event.preventDefault !== "undefined") {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  }
};

Contoh penggunaan:

var eventHandler = function(evt) {
  var target = eventUtility.getTarget(evt),
    tagName = target.tagName;

  if(evt.type === "click") {
    if(tagName === "A" || tagName === "BUTTON") {
      alert("You clicked on an A element, and the innerHTML is " + target.innerHTML + "!");
      eventUtility.preventDefault(evt);
    }
  } else if(evt.type === "mouseover" && tagName === "A") {
    alert("mouseovered " + target.innerHTML);
  }

};

eventUtility.addEvent(document, "click", eventHandler);
eventUtility.addEvent(document, "mouseover", eventHandler);

eventUtility.removeEvent(document, "mouseover", eventHandler);