【小技巧】js为html控件注册事件
2007-07-25 17:35
330 查看
在最近的工作中,需要做一个效果:(最终效果—展开时)
(闭合时)
通过点击请选择旁边的箭头
来展开或闭合。
很正常的我们会为这个箭头图片添加一个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如何来注册事件。
欢迎大家给出意见。
(闭合时)
通过点击请选择旁边的箭头
来展开或闭合。
很正常的我们会为这个箭头图片添加一个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如何来注册事件。
欢迎大家给出意见。
相关文章推荐
- 牛腩购物9 用户表设计/动软生成器/金钱字段decimal(18, 2)/ 注册的时候的前台js判断/后台代码判断/正则表达式软件/RegexBuddy/设置数据库字段的唯一性约束/如何获取控件在前台html的id值/如何将C#的后台正则换成js的正则
- js 注册控件的onclick事件
- Jquery和Js如何在页面触发回车事件(或者其他html控件)
- JS和HTML分离:注册事件的方法进行封装
- js 获取当前焦点所在的元素、给元素和input控件添加键盘监听事件、添加页面级的键盘监听事件
- JS鼠标事件、HTML页面事件大全,比较全,推荐收藏
- UpdatePanel中用后台CS代码调用JS代码,先执行控件事件,后触发JS
- 【js与jquery】html中onsubmit事件的用法
- js html时间控件2
- 动态生成html ,绑定js事件
- 手机html页面对checkbox控件需要使用click事件,而不是tap
- Cocos2d-js创建构造注册事件监听回调函数
- webBrowser中为html控件赋值及调用js[vb.net]
- HTML文档对象的事件及JS函数解析
- js给html加载事件的几种常用方式
- 分析js闭包引起的事件注册问题
- JS注册事件 JS:attachEvent和addEventListener 使用方法
- html文本框控件的常用属性、事件和方法
- HTML中定义的事件和JS中事件绑定的区别
- 在C# WebBrowser控件插入JS代码并执行,可以修改js就能对html执行任意操作