责任链模式 模拟javascript事件冒泡
在责任链模式里,很多对象由每一个对象对其下家的引用而连接起来形成一条链。请求在这个链上传递,直到链上的某一个对象决定处理此请求,并且终止传递。
javascript事件冒泡:
IE 事件由最接近事件发生坐标的html元素处发起,在事件没有被阻止的情况下,事件将跟随着该界定继承自的各个父节点冒泡穿过整个DOM节点层次。
? ? ? ? FF 首先会来一个与IE相反方向的事件流,若未被catch,然后再来一个与IE相同的方向的事件流。
?
由上面可以看出事件冒泡视乎就是责任链模式的一种表现,所以做了如下的代码测试,
1. 对链上的每个元素抽象出一个接口:
?
?4. 生成各种html元素
?
?5. 生成dom元素容器对象
?
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 未阻止事件冒泡
table 进行了 click
table 对事件 click 进行如下处理:
alert('你好啊')
------------------------处理结束--------------------
table 未阻止事件冒泡
body 进行了 click
body 未对事件 click 进行处理!
body 未阻止事件冒泡
html 进行了 click
html 未对事件 click 进行处理!
html 未阻止事件冒泡
事件已经冒到window上了
?
如下是dom反向冒js事件
?
html 进行了 click的事件流
html 未对事件 click 进行处理!
html 未阻止事件冒泡
body 进行了 click的事件流
body 未对事件 click 进行处理!
body 未阻止事件冒泡
table 进行了 click的事件流
table 对事件 click 进行如下处理:
alert('你好啊')
------------------------处理结束--------------------
table 未阻止事件冒泡
tr 进行了 click的事件流
tr 未对事件 click 进行处理!
tr 未阻止事件冒泡
td 进行了 click的事件流
td 未对事件 click 进行处理!
td 未阻止事件冒泡
div 进行了 click的事件流
--------------div通用事件处理方法-------------------
div 对事件 click 进行如下处理 :
弹出窗口
--------------处理结束-------------------
div 未阻止事件冒泡
input 进行了 click的事件流
input 未对事件 click 进行处理!
input 未阻止事件冒泡