Javascript练习：You Move. I Follow You!
接着操练Javascript，想起很多网站鼠标后面会有个烦人的信息跟着，就试试看了。
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>
</head>
<body>
<p>You Move. I Follow You!</p>
</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 =
{
move: function(event)
{
var textToBeMoved = document.getElementsByTagName("p")[0];
if(textToBeMoved == null)
{
return null;
}
event = EventUtil.getEvent(event);
clientX = event.clientX;
clientY = event.clientY;
textToBeMoved.style.position = "absolute";
textToBeMoved.style.left = clientX + 10 + "px";
textToBeMoved.style.top = clientY + "px";
},
};
LoadUtil.js:
var LoadUtil =
{
loadEventHandler: function()
{
EventUtil.addHandler(document, "mousemove", MouseEventUtil.move);
},
};
EventUtil.addHandler(window, "load", LoadUtil.loadEventHandler);