責任連鎖モードはjavascript事件を模擬して泡が発生します.
10392 ワード
責任連鎖のモードの中で、多くの対象はそれぞれの対象からその下の家に対する引用によって連結して一つの鎖を形成します.この要求は、チェーン上のあるオブジェクトがこの要求を処理することを決定し、転送を終了するまで、このチェーン上で伝達される.
javascript事件の泡が立つ:
IEイベントは、最も近いイベント発生座標のhtml要素によって開始され、イベントが阻止されていない場合、イベントは、その定義に従って継承された各親ノードとともにDOMノード全体のレベルを横断する.
FFはまず、IEと反対方向のイベントフローを作り、catchがなければ、IEと同じ方向のイベントフローをもう一つ作る.
上からは、事件の泡視が責任連鎖モードの一種の表現であることが分かりますので、下記のコードテストを行いました.
1.チェーン上の各要素に対して一つのインターフェースを抽象化する:
inputはclickを行いました.
inputはイベントclickを処理していません.
inputは事件の泡が立つことを阻止していません.
divはclickを行いました
------------div共通事件処理方法-----------
divはイベントclickを以下のように処理します.
ポップアップウィンドウ
--------------処理終了---------------------------------
divは事件の泡が発生することを阻止していません.
tdはclickを行いました
tdイベントclickは未処理です!
tdイベントの泡が発生するのを阻止していません.
trはclickを行いました
trイベントclickは未処理です.
trイベントの泡が発生するのを阻止していません.
テーブルはclickを行いました.
テーブルはイベントclickを以下のように処理します.
alert('こんにちは')
--------------処理終了-------------------
テーブルは事件の泡が立つことを阻止していません.
bodyはclickを行いました.
bodyはイベントclickを処理していません!
bodyは事件の泡が立つことを阻止していません.
)clickを行いました.
htmlイベントclickは未処理です!
)事件の泡が発生するのを阻止していません.
事件はもうwindowの上に現れました.
以下のようにdom逆方向jsイベントです.
)clickを行ったイベントフロー
htmlイベントclickは未処理です!
)事件の泡が発生するのを阻止していません.
bodyはclickのイベントフローを行いました.
bodyはイベントclickを処理していません!
bodyは事件の泡が立つことを阻止していません.
テーブルはclickのイベントフローを行いました.
テーブルはイベントclickを以下のように処理します.
alert('こんにちは')
--------------処理終了-------------------
テーブルは事件の泡が立つことを阻止していません.
tr clickのイベントフローを行いました.
trイベントclickは未処理です.
trイベントの泡が発生するのを阻止していません.
tdはclickのイベントフローを行いました.
tdイベントclickは未処理です!
tdイベントの泡が発生するのを阻止していません.
divはclickのイベントフローを行いました.
------------div共通事件処理方法-----------
divはイベントclickを以下のように処理します.
ポップアップウィンドウ
--------------処理終了---------------------------------
divは事件の泡が発生することを阻止していません.
inputはclickのイベントフローを行いました.
inputはイベントclickを処理していません.
inputは事件の泡が立つことを阻止していません.
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.println("-------------- -------------------");
}
public Dom getParent() {
return null;
}
}
class Input extends DomHtml {
@Override
public Dom getParent() {
// TODO Auto-generated method stub
return null;
}
}
5.dom元素の容器オブジェクトを生成するpackage com.sail.utils.htmlEventFlow.dom;
import java.util.ArrayList;
import java.util.List;
import com.sail.utils.htmlEventFlow.event.JsEvent;
/**
* dom dom
* @author wjs
*
*/
public class Window extends DomHtml {
//dom
List<Dom> elements=new ArrayList<Dom>();
/**
* dom
* @param dom
* @return
*/
public Dom nextDom(Dom dom) {
if(dom == null)
return null;
int index=elements.indexOf(dom);
index++;
if(index <0 || index>=elements.size())
return null;
return elements.get(index);
}
/**
*
* @param dom
*/
public void putDom(Dom dom){
if(dom==null)
return ;
this.elements.add(dom);
}
/**
* dom ,
*/
@Override
public void flowEvent(JsEvent event, Dom dom) {
Dom next=this.nextDom(dom);
if(next==null){
System.out.println(" window ");
System.out.println();
return ;
}
// dom “this” ,
next.flowEvent(event, this);
}
@Override
public Dom getParent() {
// TODO Auto-generated method stub
return null;
}
}
6.イベントインターフェースの定義package com.sail.utils.htmlEventFlow.event;
import com.sail.utils.htmlEventFlow.dom.Dom;
/**
*
* @author wjs
*
*/
public interface JsEvent {
//
String getType();
//
Dom getTarget();
//
void stopPropagation();
}
7.クリックイベントを定義するpackage com.sail.utils.htmlEventFlow.event;
import com.sail.utils.htmlEventFlow.dom.Dom;
public class ClickEvent implements JsEvent {
private String type;
public Dom getTarget() {
return null;
}
public String getType() {
return this.type;
}
public void setType(String type) {
this.type=type;
}
public void stopPropagation() {
}
}
8.テストコードpackage com.sail.utils.htmlEventFlow;
import com.sail.utils.htmlEventFlow.dom.*;
import com.sail.utils.htmlEventFlow.event.ClickEvent;
public class FlowEvent {
public static void main(String[] args) {
DomHtml input=new Input();
input.setTagName("input");
DomHtml div=new Div();
div.setTagName("div");
DomHtml td=new Td();
td.setTagName("td");
DomHtml tr=new Tr();
tr.setTagName("tr");
DomHtml table=new Table();
table.setTagName("table");
DomHtml body=new Body();
body.setTagName("body");
DomHtml html=new Html();
html.setTagName("html");
Window window=new Window();
window.setTagName("window");
String function="alert(' ')";
table.setEventFuntion(function);
window.putDom(window);
window.putDom(input);
window.putDom(div);
window.putDom(td);
window.putDom(tr);
window.putDom(table);
window.putDom(body);
window.putDom(html);
ClickEvent event=new ClickEvent();
event.setType("click");
window.flowEvent(event, window);
}
}
9.運転結果inputはclickを行いました.
inputはイベントclickを処理していません.
inputは事件の泡が立つことを阻止していません.
divはclickを行いました
------------div共通事件処理方法-----------
divはイベントclickを以下のように処理します.
ポップアップウィンドウ
--------------処理終了---------------------------------
divは事件の泡が発生することを阻止していません.
tdはclickを行いました
tdイベントclickは未処理です!
tdイベントの泡が発生するのを阻止していません.
trはclickを行いました
trイベントclickは未処理です.
trイベントの泡が発生するのを阻止していません.
テーブルはclickを行いました.
テーブルはイベントclickを以下のように処理します.
alert('こんにちは')
--------------処理終了-------------------
テーブルは事件の泡が立つことを阻止していません.
bodyはclickを行いました.
bodyはイベントclickを処理していません!
bodyは事件の泡が立つことを阻止していません.
)clickを行いました.
htmlイベントclickは未処理です!
)事件の泡が発生するのを阻止していません.
事件はもうwindowの上に現れました.
以下のようにdom逆方向jsイベントです.
)clickを行ったイベントフロー
htmlイベントclickは未処理です!
)事件の泡が発生するのを阻止していません.
bodyはclickのイベントフローを行いました.
bodyはイベントclickを処理していません!
bodyは事件の泡が立つことを阻止していません.
テーブルはclickのイベントフローを行いました.
テーブルはイベントclickを以下のように処理します.
alert('こんにちは')
--------------処理終了-------------------
テーブルは事件の泡が立つことを阻止していません.
tr clickのイベントフローを行いました.
trイベントclickは未処理です.
trイベントの泡が発生するのを阻止していません.
tdはclickのイベントフローを行いました.
tdイベントclickは未処理です!
tdイベントの泡が発生するのを阻止していません.
divはclickのイベントフローを行いました.
------------div共通事件処理方法-----------
divはイベントclickを以下のように処理します.
ポップアップウィンドウ
--------------処理終了---------------------------------
divは事件の泡が発生することを阻止していません.
inputはclickのイベントフローを行いました.
inputはイベントclickを処理していません.
inputは事件の泡が立つことを阻止していません.