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]();
}
}
}