您的位置：首页 > Web前端 > JavaScript

js观察者模式

2015-10-10 08:33 495 查看

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script>

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 : 楼层

//events : 书架

//fn : 一本书

obj.listeners = obj.listeners || {};

obj.listeners[events] = obj.listeners[events] || [];

obj.listeners[events].push( fn );

console.log(obj.id+"------------"+obj.listeners[events]);

/*

var json = {"events1":['fn1','fn2'],'events2':['fn3','fn4']}

*/

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

}

}

</script>

</head>

<body>

<div id="div1">div</div>

<span id="span1">span</span>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航