自定义事件

• 什么是组件？
  • 对面向对象的深入应用（UI组件，功能组件）
  • 将配置参数、方法、事件三者分离
• 创建自定义组件
  • 有利于多人协作开发代码
  • 如何去挂载自定义事件与事件函数

自定义事件：主要是跟函数有关系，就是让函数能够具备事件的某些特性。

用原生的方法写自定义事件

window.onload = function(){
  var oDiv = document.getElementById("div1");
  var oSpan = document.getElementById("span1");
  
  bindEvent(oDiv,"click",function(){
    alert(1);
  });
  bindEvent(oDiv,"click",function(){
    alert(2);
  });
  bindEvent(oSpan,"show",function(){
    alert(3);
  });
  bindEvent(oSpan,"show",function(){
    alert(4);
  });
  bindEvent(oSpan,"hide",function(){
    alert(5);
  });
  
  fireEvent(oSpan,"show");  //弹出3，4
  
  function bindEvent(obj,events,fn){
  	obj.listeners = obj.listensrs || {};
  	obj.listeners[events] = obj.listeners[events] || [];
  	obj.listeners[events].push(fn);
    if(obj.addEventListener){
      obj.addEventListener(events,fn,false);
    }else{
      obj.attachEvent("on" + events,fn);
    }
  }
  
  function fireEvent(obj,events){
    for(var i = 0;i < obj.listeners[events].length;i++){
      obj.listeners[events][i]();
    }
  }
}

---

本文结束，感谢阅读。

本文作者：melody0z
本文链接：https://melodyvoid/JavaScript/custom-event.html
欢迎转载，转载请注明文本链接