以前很少做UI，没有接触过HTC；今天公司培训，讲HTC，讲师在上面讲了半个钟，我还没有听明白是咋回事，他就布置下一道练习：
写一个HTC，要求：1、在点击被绑定的<SPAN>标签时，改变SPAN的内容：被点击的次数；2、提供一个属性，MaxClickCount；3、提供一个方法，GetClickedCount ，返回被点击次数；4、提供一个事件，当点击次数达到MaxClickCount，抛出事件；5、写一个页面调用HTC。上网搜了一下，得到如下资料： HTC是HTML Component的缩写，是IE5及后续版本浏览器所支持的客户端组件。据我个人理解，HTC就是一组以DHTML为基础封装了客户端行为的脚本，每HTC以*.htc的文件存储，一个HTC是一个客户端“类”。 编写HTC最重要的一点是知道element对象的意思，它代表了当前的HTC，类似于C＃类中的this。例如element.innerHTML可以访问当前HTC对象在document中所包含的html代码。既然HTC是“类”，它当然有属性、方法、事件，下面简要说明其定义方式： <PUBLIC:COMPONENT></PUBLIC:COMPONENT>：定义HTC，这个标签是其他定义的父元素。<PUBLIC:PROPERTY NAME=”pName” GET=”getMethod” PUT=”putMethod” />： 定义HTC的属性，里面三个定义分别代表属性名、读取属性、设置属性时HTC所调用的方法。<PUBLIC:METHOD NAME=”mName” />：定义HTC的方法，NAME定义了方法名。<PUBLIC:EVENT NAME=”eName” ID=”eId” />：定义了HTC的事件，NAME定义了事件名，ID是个可选属性，在HTC中唯一标识这个事件。<PUBLID:ATTACH EVENT=”sEvent” ONEVENT=”doEvent” />：定义了浏览器传给HTC事件的相应方法，其中EVENT是浏览器传入的事件，ONEVENT是处理事件的方法。 常用的HTC定义就这么多，有关更详细的信息，请参阅 开始做练习，还是不会....慢慢磨啊...磨啊...终于在一个多小时后，把结果给磨出来了，汗...
count.htc 
<PUBLIC:COMPONET><!--定制事件--><PUBLIC:EVENT NAME="spanOnClick" id="onMaxClickCount"/><!--定制方法--><PUBLIC:method name="GetClickedCount" internalName="f_GetClickedCount"/><!--定制属性--><public:property name="MaxClickCount" get="get_MaxClickCount" put="set_MaxClickCount"/><!--关联客户端element的onclick事件，element被click时，执行f_spanOnClick()函数--><PUBLIC:ATTACH EVENT="onclick" ONEVENT="f_spanOnClick()"/><!-- htc脚本 --><script>
var count=0;var MaxClickCount=0;function get_MaxClickCount()
{ return MaxClickCount;
}function set_MaxClickCount(value){ MaxClickCount=value;}function f_GetClickedCount(){ return count;}function f_spanOnClick(){ if(count<MaxClickCount) { count++; element.innerHTML="Count:" + count.toString(); } else { //触发spanOnClick事件 oEvent = createEventObject(); onMaxClickCount.fire(oEvent); }}
</script></PUBLIC:COMPONENT>
test.html <html> <body onload="init()"> <p align="center"> <!--htc中定制了spanOnClick事件，并且为span的onclick事件绑定了方法--> <span spanOnClick="Over()" id="countBar" title="Count:" style="BEHAVIOR:url(count.htc); CURSOR:hand; font-size:20; background-color:red;" >Count</span> </p> </body> <script> function init() { countBar.MaxClickCount=3; } function Over() { alert('Game Over'); } </script></html>