JavaScript练习：文本的Click and Remove功能
继续操练，本文使用了Cross Browser的Event处理机制，另外也使用了NodeIterator功能：
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Click And Remove</title>
<script type="text/javascript" src="js/EventUtil.js"></script>
<script type="text/javascript" src="js/MouseEventUtil.js"></script>
<script type="text/javascript" src="js/LoadUtil.js"></script>
<style type="text/css">
#layout
{
background-color:#cccccc;
border:2px solid #333333;
width:800px;
height:400px;
margin:0px auto;
}
</style>
</head>
<body>
<div id="layout">
<p>Cloud computing is a colloquial expression used to describe a variety of different types of</p>
<p>computing concepts that involve a large number of computers connected through a real-time </p>
<p>communication network (typically the Internet).[1] Cloud computing is a jargon term without </p>
<p>a commonly accepted non-ambiguous scientific or technical definition. In science, cloud computing</p>
<p>is a synonym for distributed computing over a network and means the ability to run a program on </p>
<p>many connected computers at the same time. The phrase is also, more commonly used to refer to </p>
<p>network based services which appear to be provided by real server hardware, which in fact are </p>
<p>served up by virtual hardware, simulated by software running on one or more real machines. Such</p>
<p> virtual servers do not physically exist and can therefore be moved around and scaled up (or down)</p>
<p>on the fly without affecting the end user - arguably, rather like a cloud.</p>
</div>
</body>
</html>
EventUtil.js:
var EventUtil =
{
addHandler: function(element, type, handler)
{
if(element.addEventListener)
{
element.addEventListener(type, handler, false);
}
else if(element.attachEvent)
{
element.attachEvent("on" + type, handler);
}
else
{
element["on" + type] = handler;
}
},
removeHandler: function(element, type, handler)
{
if(element.removeEventListener)
{
element.removeEventListener(type, handler, false);
}
else if(element.detachEvent)
{
element.detachEvent("on" + type, handler);
}
else
{
element["on" + type] = null;
}
},
getEvent: function(event)
{
return event ? event : window.event;
},
getTarget: function(event)
{
return event.target ? event.target : event.srcTarget;
}
};
MouseEventUtil.js:
var MouseEventUtil =
{
removeSelf: function(event)
{
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if(target.tagName.toLowerCase() != "p")
{
return;
}
var parent = target.parentNode;
var len = parent.childNodes.length;
for(var i = 0; i < len; i++)
{
if(parent.childNodes[i] == target)
{
break;
}
}
parent.removeChild(parent.childNodes[i]);
},
};
LoadUtil.js:
var LoadUtil =
{
filter: function(node)
{
return node.tagName.toLowerCase() == "p" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
},
loadEventHandler: function()
{
var layout = document.getElementById("layout");
var iterator = document.createNodeIterator(layout, NodeFilter.SHOW_ELEMENT, LoadUtil.filter, false);
var node = iterator.nextNode();
while(node != null)
{
EventUtil.addHandler(node, "click", MouseEventUtil.removeSelf);
node = iterator.nextNode();
}
},
};
EventUtil.addHandler(window, "load", LoadUtil.loadEventHandler);