【小技巧】js为html控件注册事件

在最近的工作中，需要做一个效果：(最终效果—展开时)



（闭合时）



通过点击请选择旁边的箭头 来展开或闭合。

很正常的我们会为这个箭头图片添加一个click事件，可能代码如下：

< img onclick = " showReceiverChoice() "  src = " dropdown.jpg "  align = " absmiddle "
                id = " imgchoosesender "  style = " padding-right: 0;  "   />

我们添加两个函数，一个是展开，一个是关闭：

     // 显示“选择层”
     function  showReceiverChoice()
    {    
        document.getElementById( " imgchoosesender " ).src = " up.jpg " ;
        document.getElementById( " divsenderchoice " ).style.display = " block "
        document.getElementById( " imgchoosesender " ).setAttribute('onclick',document.all  ?  eval( function (){hideReceiverChoice()}) : 'javascript:hideReceiverChoice()');
    }

     // 隐藏“选择层”
     function  hideReceiverChoice()
    {
        document.getElementById( " divsenderchoice " ).style.display = " none "
        document.getElementById( " imgchoosesender " ).src = " dropdown.jpg " ;
        document.getElementById( " imgchoosesender " ).setAttribute('onclick',document.all  ?  eval( function (){showReceiverChoice()}) : 'javascript:showReceiverChoice()');
    }
    

我们可以注意到中两个函数的最后一句脚本通过了setAttribute方法为 注册了展开和关闭事件，从而实现了本文最上面出现的效果。

注册脚本搜索至网上，可以兼容 IE 6.0+ FF。
本文主要是表达了一种应用，顺便也简单地了解一下js如何来注册事件。
欢迎大家给出意见。

转载于:https://www.cnblogs.com/valens/archive/2007/07/25/831221.html