首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

责任链形式 模拟javascript事件冒泡

2012-11-16 
责任链模式 模拟javascript事件冒泡在责任链模式里,很多对象由每一个对象对其下家的引用而连接起来形成一

责任链模式 模拟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 未阻止事件冒泡

热点排行