js中自定义事件

js中自定义事件

结构

<div id="box">box</div>

1.自定义事件:参1事件名;参2为对象,三个字段

//detail字段用来传递数据，可以是任何类型
var customEv = new CustomEvent("look", {
  bubbles: true,
  cancelable: false,
  detail: function(){
    console.log(66);
  }
});​

2.监听 (不能用on来绑定):

var box=document.getElementById("box");
box.addEventListener("look",function(e){
  console.log(8);
  console.log(e.bubbles);
  e.detail();
  customEv.detail();
});

3.触发(显示触发):

box.dispatchEvent(customEv);//标准浏览器
box.fireEvent(customEv);//IE

/*说明事件可以在任何元素触发,
  也可以是document window ……
  eg:document.dispatchEvent(ev);

但是必须保证:谁监听的，触发事件就是它。
不能是这种情况:
  监听用box，而触发是document，没有用。*/

效果图

---

分隔线 看到没有

---

1创建自定义事件:

function bindEvent(obj,event,fn){
  obj.listeners=obj.listeners || {};
  obj.listeners[event]=obj.listeners[event]||[]
  obj.listeners[event].push(fn);
  if(obj.nodeType){//判断是元素
    if(obj.addEventListener){
      obj.addEventListener(event,fn,false);
    }else{
      obj.attachEvent("on"+event,fn);
    }
  }
}

2主动触发自定义事件

function fireEvent(obj,event){
  if(obj.listeners && obj.listeners[event]){
    var len=obj.listeners[event].length;
    for(var i=0;i<len;i++){
      obj.listeners[event][i]();
    }
  }
}