代码改变世界

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

2007-07-25 17:35  Valens  阅读(881)  评论(1编辑  收藏  举报

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



(闭合时)



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

很正常的我们会为这个箭头图片添加一个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如何来注册事件。
欢迎大家给出意见。