js事件(2)
8604 ワード
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>JS </title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<style>
</style>
</head>
<body>
<input id="btn1" type="button" value="click1" />
<input id="btn2" type="button" value="click2" />
<input id="btn3" type="button" value="click3" />
</body>
</html>
<script type="text/javascript">
// ie
var console = console || {};
console.log = console.log || function(a){
alert(a);
}
/*
, , ,
, .
*/
/*
, .
, .
, .
, , , .
*/
var targetEvent = function(){
//
function eventHandle(dom,type,fn,t){
switch(t){
case 1:
//
// dom , dom !
dom[type] = fn;
break;
case 2:
//
if(typeof dom[type] == "function"){
dom[type]();
}
break;
case 3:
//
delete dom[type];
break;
}
}
//dom
function analyze(dom,type,fn,t){
// dom
if(dom.length){
for(var i = 0,len = dom.length; i < len; i++){
var el = dom[i];
// dom
if(el && el.nodeName){
//
eventHandle(dom,type,fn,t);
}
}
}
else{
// dom
if(dom && dom.nodeName){
//
eventHandle(dom,type,fn,t);
}
}
}
//
function bind(dom,type,fn){
analyze(dom,type,fn,1);
}
//
function trigger(dom,type){
analyze(dom,type,{},2);
}
//
function remove(dom,type){
analyze(dom,type,{},3);
}
return {
bind:bind,
trigger:trigger,
remove:remove
}
}();
/*
var btn1 = document.getElementById("btn1");
//
targetEvent.bind(btn1,"myclick",function(){
console.log("myclick");
});
//
targetEvent.trigger(btn1,"myclick");
var btns = document.getElementsByTagName("input");
//
targetEvent.bind(btns,"btnclick",function(){
console.log("btnclick");
});
//
targetEvent.trigger(btns,"btnclick");
*/
/*
, .
, , , .
, btns( ).
, .
, , btns,
, , .
, .
*/
var targetEvent = function(){
//
var handler = {};
// dom
var doms = {};
//
function eventHandle(t,type,dom,fn){
switch(t){
case 1:
//
// dom , dom !
dom[type] = fn;
//
if(!(handler[type] instanceof Array)){
handler[type] = [];
doms[type] = [];
}
handler[type].push(dom[type]);
doms[type].push(dom);
break;
case 2:
//
var dom = handler[type];
if(dom instanceof Array){
for(var i = 0,len = dom.length; i < len; i++){
var fun = dom[i];
if(typeof fun == "function"){
fun();
}
}
}
break;
case 3:
//
var dom = handler[type];
if(dom instanceof Array){
for(var i = 0,len = dom.length; i < len; i++){
if(typeof dom[i] == "function"){
// dom
delete doms[type][i][type];
//
handler[type].splice(i,1);
// ,
i--;
len--;
}
}
}
break;
}
}
//dom
function analyze(t,dom,type,fn){
// dom
if(dom.length){
for(var i = 0,len = dom.length; i < len; i++){
var el = dom[i];
// dom
if(el && el.nodeName){
//
eventHandle(t,type,dom,fn);
}
}
}
else{
// dom
if(dom && dom.nodeName){
//
eventHandle(t,type,dom,fn);
}
}
}
//
function bind(dom,type,fn){
analyze(1,dom,type,fn);
}
//
function trigger(type){
eventHandle(2,type);
}
//
function remove(type){
eventHandle(3,type);
}
return {
bind:bind,
trigger:trigger,
remove:remove
}
}();
var btn1 = document.getElementById("btn1");
//
targetEvent.bind(btn1,"myclick",function(){
console.log("myclick1");
});
//
targetEvent.trigger("myclick");
//
targetEvent.remove("myclick");
var btns = document.getElementsByTagName("input");
//
targetEvent.bind(btns,"myclick",function(){
console.log("myclick2");
});
//
targetEvent.trigger("myclick");
/*
, dom myclick,
myclick, myclick .
*/
/*
, , , .
, , , , .
*/
var observer = function(){
//
var subject = {};
//
function handler(t,type,obj,fn){
switch(t){
case 1:
//
obj[type] = fn;
//
if(!(subject[type] instanceof Array)){
subject[type] = [];
}
subject[type].push(obj[type]);
break;
case 2:
//
var obj = subject[type];
if(obj instanceof Array){
for(var i = 0,len = obj.length; i < len; i++){
var fun = obj[i];
if(typeof fun == "function"){
fun();
}
}
}
break;
case 3:
//
var obj = subject[type];
if(obj instanceof Array){
for(var i = 0,len = obj.length; i < len; i++){
if(typeof obj[i] == "function"){
//
subject[type].splice(i,1);
// ,
i--;
len--;
}
}
}
break;
}
}
//
function register(obj,type,fn){
handler(1,type,obj,fn);
}
//
function trigger(type){
handler(2,type);
}
//
function remove(type){
handler(3,type);
}
return {
register:register,
trigger:trigger,
remove:remove
}
}();
// 1
function Class1(){
this.say = function(){
console.log("class1 say");
}
}
// 2
function Class2(){
this.say = function(){
console.log("class2 say");
}
}
var c1 = new Class1();
var c2 = new Class2();
//
observer.register(c1,"valuechange",c1.say);
observer.register(c2,"valuechange",c2.say);
//
observer.trigger("valuechange");
//
observer.remove("valuechange");
/*
:
1. .
2. .
*/
</script>