cloneNodeにおいて、I.Eではイベントもコピーするが、Firefoxではイベントはコピーされない

うそ〜ん・・って感じでハマってしまった。

これ、I.EとFirefoxでどっちが良い挙動かっていうと、Firefoxです。I.EはcloneNodeでなんとidまでコピーしてくれるんでidが唯一じゃなくなってしまう・・・・。# idはF.Fもコピーしてくれるみたい。。

そりゃま、パッと見はI.Eの挙動の方が便利かな〜って思うけど、余計なお世話だよなぁ・・・・。

以下、検証用HTML

<html>
<head>
<style>
.w{
	background-color: #fff;
}
div#origin{
   border: 1px solid #0f0; 
}
textarea{
	width: 200px; height: 100px;
}
textarea.on{
    background-color: #ccc;
}
</style>
<script src="./js/prototype.js"></script>
<script>
Event.observe(window, 'load', function(){
	Event.observe($('origin').getElementsByTagName('TEXTAREA')[0],
                  'focus',
                  function(e){
                      Element.addClassName(Event.element(e), 'on');
                  });
	Event.observe($('origin').getElementsByTagName('TEXTAREA')[0],
                  'blur',
                  function(e){
                      Element.removeClassName(Event.element(e), 'on');
                  });
	Event.observe($('origin'), 'click',
                  function(e){
                      alert(Event.element(e).id);
                  });
    
    var div_c = $('origin').cloneNode(true);
    document.body.appendChild(div_c);
});
</script>
</head>
<body bgcolor=#AF5454>
<div id="origin" class="w">
	<textarea></textarea>
</div>
</body>
</html>