Detaillierte Erläuterung der Javascript-Implementierung benutzerdefinierter Ereignisse_Javascript-Fähigkeiten-js-Tutorial-php.cn

Beim Betrieb von DOM verwenden wir normalerweise Onclick, Onmouseover und eine Reihe browserspezifischer Verhaltensereignisse Benutzerdefinierte Ereignisse dienen also, wie der Name schon sagt, dazu, Ihre eigenen Ereignistypen und Ereignisverarbeitungsfunktionen zu definieren. Wenn Sie benötigen, welcher Ereignistyp zum richtigen Zeitpunkt benötigt wird, können Sie which handler aufrufen

Von 1.js unterstützte Browser-Standardereignisse

Ereignisse für bestimmte Browserverhalten oder Systemereignisse, JS-Standardereignisse usw. sind alle in Ordnung. Jeder weiß, worauf ich mich beziehe. Ich werde sie unten als JS-Standardereignisse bezeichnen.

Ich glaube, jeder hat eine Reihe von Vorgängen wie die Ereignisbindung und das Entfernen von Ereignissen von js-Standardereignissen verwendet, wie zum Beispiel:

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

Nach dem Login kopieren

oder

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

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

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

Nach dem Login kopieren

Ich werde nicht zu viel recherchieren. Schließlich werden wir über benutzerdefinierte js-Ereignisse sprechen. Hier ist ein Code, den ich zuvor gekapselt habe, um js-Standardereignisse zu verarbeiten:

//跨浏览器的事件处理程序 
//调用时候直接用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&#63; event : window.event; 
  }, 
  //获得事件类型 
  getType:function(event){ 
    return event.type; 
  } 
};

Nach dem Login kopieren

Fahren wir mit dem nächsten Thema fort, benutzerdefinierte js-Ereignisse

2. Objektliteral kapselt benutzerdefinierte js-Ereignisse

Gemäß dem oben genannten Paket können wir so schwanger werden

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

Nach dem Login kopieren

Ich glaube, das ist für jeden leichter zu verstehen, und dann gibt es noch eine andere Frage, die Sie sich vorstellen können, nämlich js Standardereignisse, js kann eins zu eins entsprechen, wissen Sie, welches das ist, und was ist dann mit unserem Brauch? Ereignisse, dies nacheinander Die entsprechende Zuordnungstabelle kann nur von uns selbst erstellt werden, und dann mache ich das

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

Nach dem Login kopieren

So habe ich diese Zuordnungsbeziehung konstruiert

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

Nach dem Login kopieren

Auf diese Weise kann jeder Typ mehrere Verarbeitungsfunktionen haben, um unsere zukünftige Erweiterung zu erleichtern

Als nächstes kommt der eigentliche Codierungsaspekt, das Schreiben spezifischer Verarbeitungscodes...

Ich glaube, dass sich alle über diese Idee bereits im Klaren sind, ich werde den Code direkt anhängen

//直接量处理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);
    }
  }
};

Nach dem Login kopieren

Dies ist eine Methode zum Aufrufen von run

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

Nach dem Login kopieren

Diese Methode hat einen Nachteil: Das Verarbeitungsereignis kann nicht gelöscht werden, da wir dafür eine Zuordnungstabelle verwenden, und es wird nicht empfohlen, so viele Daten direkt in der Zuordnungstabelle zu speichern, was etwas viel ist.

Eine weitere Methode zum Extrahieren der Verarbeitungsereignisse (empfohlen)

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

Nach dem Login kopieren

Sie können auch weitere Parameter übergeben

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

Nach dem Login kopieren

Zusammenfassung: Die Literalmethode hat einen kleinen Nachteil: Wenn wir in der Handlerfunktion versehentlich ein bestimmtes Attribut null zuweisen, führt dies zum Absturz unserer eventTarget-Methode. Es scheint, dass Prototyping eine gute und etwas sicherere Methode sein sollte.

3. Der Objektprototyp kapselt benutzerdefinierte js-Ereignisse

Da die vorherigen Ideen im Grunde klar erklärt sind, werde ich den Code hier direkt anhängen. Sie können die Vor- und Nachteile untersuchen und vielleicht einen besseren Weg finden, das Problem zu lösen ...

//自定义事件构造函数
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);
    }
  }
};

Nach dem Login kopieren

Aufrufmethode

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

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

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

Nach dem Login kopieren

Die Prototyp-Methode hat die gleiche Funktion wie die direkte Methode...

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.