日期:2014-05-16 浏览次数:20515 次
在责任链模式里,很多对象由每一个对象对其下家的引用而连接起来形成一条链。请求在这个链上传递,直到链上的某一个对象决定处理此请求,并且终止传递。
javascript事件冒泡:
IE 事件由最接近事件发生坐标的html元素处发起,在事件没有被阻止的情况下,事件将跟随着该界定继承自的各个父节点冒泡穿过整个DOM节点层次。
? ? ? ? FF 首先会来一个与IE相反方向的事件流,若未被catch,然后再来一个与IE相同的方向的事件流。
?
由上面可以看出事件冒泡视乎就是责任链模式的一种表现,所以做了如下的代码测试,
1. 对链上的每个元素抽象出一个接口:
?
package com.sail.utils.htmlEventFlow.dom;
import com.sail.utils.htmlEventFlow.event.JsEvent;
/**
* 所有dom元素的接口
* @author wjs
*
*/
public interface Dom {
//获取当前dom元素的名称
String getTagName();
//获取其父dom元素
Dom getParent();
//事件冒泡
void flowEvent(JsEvent event, Dom dom);
//事件处理
void catchEvent(JsEvent event);
//阻止冒泡
boolean stopEvent();
}
?2. 生成一个通用的HTML类型Dom的模板抽象父类
?
package com.sail.utils.htmlEventFlow.dom;
import com.sail.utils.htmlEventFlow.event.JsEvent;
/**
* HTML类型Dom模板
* @author wjs
*
*/
public abstract class DomHtml implements Dom {
//html元素ID
private String id;
//html元素名称
private String tagName;
//html元素js处理方法
private String eventFuntion="";
/**
* 冒泡
* @event 事件
* @dom dom元素集合容器的元素
*/
public void flowEvent(JsEvent event, Dom dom) {
//正向冒泡
System.out.println(this.getTagName()+" 进行了 "+event.getType());
//执行事件的方法
this.catchEvent(event);
//是否停止冒泡
if(stopEvent())
return ;
//调用dom的
dom.flowEvent(event, this);
//反向冒泡,事件流
System.out.println(this.getTagName()+" 进行了 "+event.getType()+"的事件流");
this.catchEvent(event);
if(stopEvent())
return ;
}
public abstract Dom getParent() ;
/**
* 模板默认处理方法
*/
public void catchEvent(JsEvent event) {
if(this.eventFuntion==null || this.eventFuntion.trim().equals(""))
System.out.println(this.getTagName()+" 未对事件 "+event.getType()+" 进行处理!");
else{
System.out.println(this.getTagName()+" 对事件 "+event.getType()+" 进行如下处理:");
System.out.println(this.eventFuntion);
System.out.println("------------------------处理结束--------------------");
}
}
/**
* 停止冒泡
*/
public boolean stopEvent() {
if(this.eventFuntion!=null && this.eventFuntion.indexOf("stopPropagation()")!=-1){
System.out.println("--------------停止往上冒泡啦--------");
return true;
}
System.out.println(this.getTagName()+" 未阻止事件冒泡");
return false;
}
public String getEventFuntion() {
return eventFuntion;
}
public void setEventFuntion(String eventFuntion) {
this.eventFuntion = eventFuntion;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public void setTagName(String tagName) {
this.tagName = tagName;
}
public String getTagName(){
return this.tagName;
}
}
?4. 生成各种html元素
?
package com.sail.utils.htmlEventFlow.dom;
public class Html extends DomHtml {
@Override
public Dom getParent() {
// TODO Auto-generated method stub
return null;
}
}
class Body extends DomHtml {
@Override
public Dom getParent() {
// TODO Auto-generated method stub
return null;
}
}
class Table extends DomHtml {
@Override
public Dom getParent() {
// TODO Auto-generated method stub
return null;
}
}
class Tr extends DomHtml {
@Override
public Dom getParent() {
// TODO Auto-generated method stub
return null;
}
}
class Td extends DomHtml {
@Override
public Dom getParent() {
// TODO Auto-generated method stub
return null;
}
}
class Div extends DomHtml {
@Override
public void catchEvent(JsEvent event) {
System.out.println("--------------div通用事件处理方法-------------------");
System.out.println(this.getTagName()+" 对事件 "+event.getType()+" 进行如下处理 :");
System.out.println("弹出窗口");
System.out.print