下面是一个网上流传很广的htc例子，例如取名：ie10_htc.htc
<component> <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="hig_lite()" /> <PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="low_lite()" /> /*其实，换成下面的写法也可以*/ /*<ATTACH EVENT="onmouseover" HANDLER="hig_lite"/>*/ /*<ATTACH EVENT="onmouseout" HANDLER="low_lite"/>*/ <script type="text/javascript"> function hig_lite() { style.color = 255; } function low_lite() { style.color = 0; } </script> </component>
对应的ie10_htc.htm代码：
<html> <head> <title id="1">asdf</title> <meta http-equiv="X-UA-Compatible" content="IE=9" /> <style> h1{ behavior: url(ie10_htc.htc) } </style> </head> <body> <h1>把鼠标放在这里</h1> </body> </html>
在IE9下运行木有问题，但是到IE9改为IE10，然后用IE10浏览就会发现效果没有了。
升级这段htc的方法倒也不难，如果用纯js来写，可以这样：
<html> <head> <title id="1">asdf</title> <meta http-equiv="X-UA-Compatible" content="IE=9" /> <script type="text/javascript"> function hig_lite() { this.style.color = 255; } function low_lite() { this.style.color = 0; } function loaded() { var hi_Arr = document.getElementsByTagName("h1"); for (var i = 0; i < hi_Arr.length; i++) { hi_Arr[i].addEventListener("mouseover", hig_lite); hi_Arr[i].addEventListener("mouseout", low_lite); } } </script> </head> <body onload="loaded()"> <h1>把鼠标放在这里</h1> </body>
因为不再依赖htc了，所以在IE9, IE10下浏览，都没问题，效果又回来了，就是代码有点冗长了。
如果换做用JQuery.js重写：
<html> <head> <title id="1">asdf</title> <meta http-equiv="X-UA-Compatible" content="IE=9" /> <script src="jquery-1.7.2.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("h1").mouseover(function () { $("h1").css("color", "blue"); }); $("h1").mouseout(function () { $("h1").css("color", "black"); }); }); </script> </head> <body > <h1 >把鼠标放在这里</h1> </body> </html>
感觉清爽很多了，同时，颜色不再支持数字，要用英文表示了，这样也好，一目了然，知道是什么意思。
通过前文(自定义属性) 和此文(事件) 可以总结出，虽然ms不再支持htc了，但迁移它到js上的代价并不太大，基本上原来的代码都能用，只不过htc中有些旧的写法要换成新写法就好！