Penjelasan terperinci tentang pelaksanaan javascript bagi kemahiran javascript_peristiwa tersuai

Kami biasanya menggunakan onclick, onmouseover dan satu siri peristiwa tingkah laku khusus penyemak imbas semasa mengendalikan DOM
Jadi acara tersuai, seperti namanya, adalah untuk menentukan jenis acara anda sendiri dan fungsi pemprosesan acara Apabila anda memerlukan jenis acara yang diperlukan pada masa yang tepat, anda boleh menghubungi pengendali yang mana

Acara lalai penyemak imbas disokong oleh 1.js

Acara untuk gelagat penyemak imbas tertentu, atau acara sistem, acara lalai js, dll. Semua orang tahu perkara yang saya maksudkan di bawah.
Saya percaya semua orang telah menggunakan satu siri operasi seperti mengikat acara dan mengalih keluar acara acara lalai js, seperti:

//DOM0级事件处理程序
var oDiv = document.getElementById('oDiv');
oDiv.onclick = function(){
  alert("你点击了我");
}

atau

//DOM2级事件处理程序
var oDiv = document.getElementById('oDiv');

//非ie
oDiv.addEventListener("click",function(){
  alert("你点击了我");
},false); 

//ie
oDiv.attachEvent("onclick", function(){
  alert("你点击了我");
});

Saya tidak akan melakukan terlalu banyak penyelidikan Lagipun, kita akan membincangkan acara tersuai js Berikut ialah kod yang telah saya rangkumkan sebelum ini untuk mengendalikan acara lalai js

//跨浏览器的事件处理程序 
//调用时候直接用domEvent.addEvent( , , );直接调用 
//使用时候，先用addEvent添加事件，然后在handleFun里面直接写其他函数方法，如getEvent； 
//addEventListener和attachEvent---都是dom2级事件处理程序 
var domEvent = { 
  //element:dom对象，event:待处理的事件，handleFun:处理函数 
  //事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等 
  addEvent:function(element,event,handleFun){ 
    //addEventListener----应用于mozilla 
    if(element.addEventListener){ 
      element.addEventListener(event,handleFun,false); 
    }//attachEvent----应用于IE 
    else if(element.attachEvent){ 
      element.attachEvent("on"+event,handleFun); 
    }//其他的选择dom0级事件处理程序 
    else{ 
      //element.onclick===element["on"+event]; 
      element["on"+event] = handleFun; 
    } 
  }, 
  //事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等 
  removeEvent:function(element,event,handleFun){ 
    //removeEventListener----应用于mozilla 
    if (element.removeEventListener) { 
      element.removeEventListener(event,handleFun,false); 
    }//detachEvent----应用于IE 
    else if (element.detachEvent) { 
      element.detachEvent("on"+event,handleFun); 
    }//其他的选择dom0级事件处理程序 
    else { 
      element["on"+event] = null; 
    } 
  }, 
  //阻止事件冒泡 
  stopPropagation:function(event){ 
    if(event.stopPropagation){ 
      event.stopPropagation(); 
    }else{ 
      event.cancelBubble = true;//IE阻止事件冒泡，true代表阻止 
    } 
  }, 
  //阻止事件默认行为 
  preventDefault:function(event){ 
    if(event.preventDefault){ 
      event.preventDefault(); 
    }else{ 
      event.returnValue = false;//IE阻止事件冒泡，false代表阻止 
    } 
  }, 
  //获得事件元素 
  //event.target--非IE 
  //event.srcElement--IE 
  getElement:function(event){ 
    return event.target || event.srcElement; 
  }, 
  //获得事件 
  getEvent:function(event){ 
    return event? event : window.event; 
  }, 
  //获得事件类型 
  getType:function(event){ 
    return event.type; 
  } 
}; 

Mari teruskan dengan topik seterusnya, acara tersuai js

2. Objek literal merangkum acara tersuai js

Mengikut pakej di atas, kita boleh hamil seperti ini

var eventTarget = {
  addEvent: function(){
    //添加事件
  },
  fireEvent: function(){
    //触发事件
  },
  removeEvent: function(){
    //移除事件
  }
};

Saya percaya ini lebih mudah untuk difahami oleh semua orang, dan kemudian terdapat satu lagi soalan yang boleh anda fikirkan, iaitu acara lalai js, js boleh sepadan satu dengan satu, tahu yang mana satu itu, kemudian bagaimana pula dengan adat kami acara, ini satu persatu Jadual pemetaan yang sepadan hanya boleh diwujudkan oleh kami sendiri, dan kemudian saya melakukan ini

var eventTarget = {
  //保存映射
  handlers:{},
  addEvent: function(){
    //处理代码
  },
  fireEvent: function(){
    //触发代码
  },
  removeEvent: function(){
    //移出代码
  }
};

Beginilah cara saya membina hubungan pemetaan ini

handlers = {
  "type1":[
    "fun1",
    "fun2",
    // "..."
  ],
  "type2":[
    "fun1",
    "fun2"
    // "..."
  ]
  //"..."
}

Dengan cara ini, setiap jenis boleh mempunyai pelbagai fungsi pemprosesan untuk memudahkan pengembangan masa hadapan kami

Seterusnya ialah aspek pengekodan sebenar, menulis kod pemprosesan khusus...

Saya percaya semua orang sudah sangat jelas tentang idea ini, saya akan terus melampirkan kod itu

//直接量处理js自定义事件
var eventTarget = {
  //保存事件类型，处理函数数组映射
  handlers:{},
  //注册给定类型的事件处理程序，
  //type -> 自定义事件类型， handler -> 自定义事件回调函数
  addEvent: function(type, handler){
    //判断事件处理数组是否有该类型事件
    if(eventTarget.handlers[type] == undefined){
      eventTarget.handlers[type] = [];
    }
    //将处理事件push到事件处理数组里面
    eventTarget.handlers[type].push(handler);
  },
  //触发一个事件
  //event -> 为一个js对象，属性中至少包含type属性，
  //因为类型是必须的，其次可以传一些处理函数需要的其他变量参数。（这也是为什么要传js对象的原因）
  fireEvent: function(event){
    //判断是否存在该事件类型
    if(eventTarget.handlers[event.type] instanceof Array){
      var _handler = eventTarget.handlers[event.type];
      //在同一个事件类型下的可能存在多种处理事件，找出本次需要处理的事件
      for(var i = 0; i < _handler.length; i++){
        //执行触发
        _handler[i](event);
      }
    }
  },
  //注销事件
  //type -> 自定义事件类型， handler -> 自定义事件回调函数
  removeEvent: function(type, handler){
    if(eventTarget.handlers[type] instanceof Array){
      var _handler = eventTarget.handlers[type];
      //在同一个事件类型下的可能存在多种处理事件，找出本次需要处理的事件
      for(var i = 0; i < _handler.length; i++){
        //找出本次需要处理的事件下标
        if(_handler[i] == handler){
          break;
        }
      }
      //删除处理事件
      _handler.splice(i, 1);
    }
  }
};

Ini ialah kaedah memanggil run

eventTarget.addEvent("eat",function(){
  console.log(123);  //123
});
eventTarget.fireEvent({type: "eat"});

Kaedah ini mempunyai kelemahan, acara pemprosesan tidak boleh dipadam, kerana kami menggunakan jadual pemetaan untuk melakukannya, dan tidak disyorkan untuk menyimpan secara langsung data dalam jadual pemetaan, yang agak banyak.

Kaedah lain untuk mengekstrak peristiwa pemprosesan (disyorkan)

function b(){
   console.log(123);
}
eventTarget.addEvent("eat",b);
eventTarget.fireEvent({
  type: "eat"
});                   //123
eventTarget.removeEvent("eat",b);
eventTarget.fireEvent({type: "eat"});  //空

Anda juga boleh melepasi lebih banyak parameter

eventTarget.fireEvent({
  type: "eat",
  food: "banana"
}); 
function b(data){
   console.log(data.food); //banana
}

Ringkasan: Kaedah literal mempunyai sedikit kelemahan, iaitu, jika kami secara tidak sengaja menetapkan atribut tertentu kepada null dalam fungsi pengendali, ini akan menyebabkan kaedah eventTarget kami ranap. Nampaknya prototaip harus menjadi kaedah yang baik dan sedikit lebih selamat.

3. Prototaip objek merangkum acara tersuai js

Memandangkan idea-idea sebelum ini pada asasnya dijelaskan dengan jelas, saya akan terus melampirkan kod di sini Anda boleh mengkaji kebaikan dan keburukan, dan mungkin anda boleh mencari cara yang lebih baik untuk menyelesaikannya...

//自定义事件构造函数
function EventTarget(){
  //事件处理程序数组集合
  this.handlers = {};
}
//自定义事件的原型对象
EventTarget.prototype = {
  //设置原型构造函数链
  constructor: EventTarget,
  //注册给定类型的事件处理程序，
  //type -> 自定义事件类型， handler -> 自定义事件回调函数
  addEvent: function(type, handler){
    //判断事件处理数组是否有该类型事件
    if(typeof this.handlers[type] == 'undefined'){
      this.handlers[type] = [];
    }
    //将处理事件push到事件处理数组里面
    this.handlers[type].push(handler);
  },
  //触发一个事件
  //event -> 为一个js对象，属性中至少包含type属性，
  //因为类型是必须的，其次可以传一些处理函数需要的其他变量参数。（这也是为什么要传js对象的原因）
  fireEvent: function(event){
    //模拟真实事件的event
    if(!event.target){
      event.target = this;
    }
    //判断是否存在该事件类型
    if(this.handlers[event.type] instanceof Array){
      var handlers = this.handlers[event.type];
      //在同一个事件类型下的可能存在多种处理事件，找出本次需要处理的事件
      for(var i = 0; i < handlers.length; i++){
        //执行触发
        handlers[i](event);
      }
    }
  },
  //注销事件
  //type -> 自定义事件类型， handler -> 自定义事件回调函数
  removeEvent: function(type, handler){
    //判断是否存在该事件类型
    if(this.handlers[type] instanceof Array){
      var handlers = this.handlers[type];
      //在同一个事件类型下的可能存在多种处理事件
      for(var i = 0; i < handlers.length; i++){
        //找出本次需要处理的事件下标
        if(handlers[i] == handler){
          break;
        }
      }
      //从事件处理数组里面删除
      handlers.splice(i, 1);
    }
  }
};

Kaedah panggilan

function b(){
  console.log(123);
}

var target = new EventTarget();
target.addEvent("eat", b);

target.fireEvent({
  type: "eat"
});                 //123

Kaedah prototaip mempunyai fungsi yang sama dengan kaedah langsung...

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.