JavaScript练习：文本的Click and Remove功能_cloud computing is a phrase used to describe a var-优快云博客

本文链接：https://blog.youkuaiyun.com/greencacti/article/details/10127337

继续操练，本文使用了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);