因为要兼容firefox和ie,所以在事件处理方面很费了些许时间,因此把心得和大家分享
一、ie处理事件的机制
采用事件冒泡策略,事件从最底层的element冒泡到最顶层的window,在事件函数里面获取事件对象
用全局变量window.event就可以了,非常简单,
二、firefox的事件的机制
在firefox中,事件处理过程复杂一些,先采取事件传播机制,从最顶层的window到最底层的element,再冒泡回到最顶层的window
事件对象是没有全局的,采用参数传到事件处理函数里面,获取方法有两种
1.默认是事件处理函数的第一个参数,也是唯一的参数,这时,事件的处理函数必须动态添加,不能写到html标记里面
function check(aaa) { alert(aaa); } <input type="text" id="txt1"/> document.getElementById("txt1 ").onclick = check;
2.可以在事件处理函数中显式的传递名为event的参数,这时事件处理函数写入html标记,并且可以传递自己的参数
并且不能象上面第一种方式一样动态添加了
function check(str1, str2) { alert(str1); alert(str2); } <input type="text" id= "txt1" onclick="check( '111 ',event)"/>
/** * 全选的所有指定名称的checkbox *@state 全选的checkbox的状态 *@name 表格中的所有checkbox的名称 *@author fangtf *@type void */ function selectAll(state,name) { var ids = document.getElementsByName(name); for (var i = 0; i < ids.length; i++) { ids[i].checked = state; } } /** * 全选的所有指定id名称的同名checkbox *@state 全选的checkbox的状态 *@name 表格中的所有checkbox的名称 *@name 表格中的所有checkbox的id *@author fangtf *@type void */ function selectAllCheckboxByID(state,name,id) { var ids = document.getElementsByName(name); for (var i = 0; i < ids.length; i++) { if(ids[i].id == id) { ids[i].checked = state; } } } /** * 全选页面上所有的checkbox *@state 全选的checkbox的状态 *@author fangtf *@type void */ function selectAlls(state) { var inputs = document.getElementsByTagName("input"); for(var i =0;i<inputs.length;i++) { if(inputs[i].type == "checkbox") { inputs[i].checked =state; } } } /** *得到鼠标所单击的行 *@type Object */ function GetRow(oElem) { while (oElem) { if (oElem.tagName.toLowerCase() == "tr" && oElem.parentElement.tagName.toLowerCase() == "tbody") { return oElem; } if (oElem.tagName.toLowerCase() == "table" || oElem.tagName.toLowerCase() == "th") { return false; } oElem = oElem.parentElement; } } /** * 全选当前行的checkbox *@state 全选的checkbox的状态 *@author fangtf *@type void */ function selectRowCheckbox(state) { var row = GetRow(window.event.srcElement); var cells = row.childNodes; for(var i=0;i<cells.length;i++) { var cell = cells[i].childNodes[0]; if(cell.tagName == "INPUT") { cell.checked = state; } } } /** *选中指定值的Radio *如:有两个radio, *第一个的name="ids",value="1" *第二个的name="ids",value="2" *调用方法selectRadio("ids","1"); *那么数值为1的Radio将被选中 *@name radio的名称 *@value radio的值 *@author fangtf *@type void */ function selectRadio(name,value) { var radioObject = document.getElementsByName(name); if(value === "") { radioObject[0].checked = true; return; } for (var i = 0; i < radioObject.length; i++) { if(radioObject[i].value == value) { radioObject[i].checked = true; break; } } } /** *选中指定值的checkbox *如:有两个checkbox, *第一个的name="ids",value="1" *第二个的name="ids",value="2" *第三个的name="ids",value="3" *调用这个方法selectCheckbox("ids","1,2")那么数值为1,2的checkbox将被选中 * *@name 要选中的checkbox数组的名称 *@value 判断时候选中的值 *@author fangtf *@type void */ function selectCheckbox(name,value) { var checkObject = document.getElementsByName(name); var values = value.split(","); for(var j = 0; j < values.length; j++) { for (var i = 0; i < checkObject.length; i++) { if(checkObject[i].value == values[j]) { checkObject[i].checked = true; break; } } } } /** *选中指定值的select *如:有一个名称为user的select *<option value="0"></option> *<option value="1"></option> *调用这个方法selectOption("user","0")那么选项为0的选项就被选中 * *@name String select的名称 *@value String 判断时候选中的值 *@author fangtf *@type void */ function selectOption(name,value) { document.getElementsByName(name)[0].value=value; }
相关推荐
本篇文章将深入探讨如何使用jQuery来操作checkbox和radio元素,这两种元素在表单提交和用户交互中扮演着重要角色。 首先,让我们了解checkbox和radio的基本概念。Checkbox用于提供多选选项,用户可以勾选多个选项;...
文件列表中出现了 "js" 目录,这可能意味着有 JavaScript 文件用于增强交互效果。例如,可以通过 JavaScript 监听 `change` 事件来动态更新关联的标签内容,或者使用 `addEventListener` 添加自定义行为。 4. **...
总的来说,“漂亮的Checkbox Radio漂亮样式”涵盖了如何使用HTML、CSS以及可能的JavaScript技术来定制和优化Checkbox与Radio的视觉效果,以提升网页的美感和用户体验。设计师和开发者可以通过各种技巧和工具创造出与...
"修改xloadtree支持checkbox radio鼠标右键菜单"这个主题涉及到的是对一个特定的JavaScript组件——xLoadTree的增强,使其具备更多功能,提升用户体验。下面将详细阐述这个主题所涵盖的知识点。 1. **xLoadTree**:...
在网页设计和开发中,`checkbox`和`radio`按钮是两种常见的表单元素,用于收集用户输入。它们都是HTML `<input>`标签的不同类型,但各自具有特定的用途和交互方式。在这里,我们主要探讨`checkbox`和`radio`的使用...
js实现checkbox的radio单选效果,且可取消选择
**zTree 3.5 Radio/Checkbox 自定义树形组件详解** zTree 是一款基于 jQuery 的强大树形插件,广泛应用于网页中的数据展示、菜单导航等场景。在 zTree 3.5 版本中,它提供了丰富的功能,包括单选(Radio)和复选...
3. 使用JavaScript库:如jQuery UI、Bootstrap等框架提供了跨浏览器的组件,包括自定义的Radio和Checkbox样式。 总之,自定义Radio和Checkbox样式是提高网页设计美感的重要手段。通过熟练运用CSS3选择器,我们可以...
在网页设计中,radio(单选按钮)和checkbox(复选框)是常见的表单元素,用于收集用户的选择信息。然而,原生的HTML radio和checkbox样式通常较为简单,不符合现代网页美观的需求。jQuery,一个广泛使用的...
文件列表中的"checkbox-radio-select样式自定义"很可能包含了CSS样式文件、HTML模板以及可能的JavaScript脚本来实现这一功能。 总结来说,自定义`checkbox`、`radio`和`select`的样式是前端开发中常见且重要的任务...
本话题主要关注如何使用jQuery来实现自定义的radio(单选按钮)和checkbox(复选框)的美化。在现代Web界面设计中,为了提供更美观、用户体验更好的表单元素,开发者经常需要对这些标准HTML元素进行定制。 首先,...
使用此类插件,只需引入相关JS和CSS文件,并简单调用插件方法,如`$('input[type="checkbox"]').hCheckbox();`。 四、实现自定义图标 为了进一步提升用户体验,我们可以用图片或图标字体(如Font Awesome)替换...
此外,文件名称列表中的"10组美化的radio&checkbox"可能包含了HTML、CSS和JavaScript文件,开发者需要将这些文件整合到自己的项目中,根据指导文档进行引用。 总之,"10组美化的radio&checkbox"为网页设计师和...
一个小例子,含全选,有注释,学习一下这些表单元素的属性和方法
例如,当用户点击一个checkbox或radio时,可以通过JavaScript监听`click`事件,然后更新对应的`LABEL`元素的类,从而改变背景图片的位置,实现选中和未选中的视觉效果。 总结来说,纯JavaScript打造网页中checkbox...
这些库常被用来展示层级数据,如组织结构、文件目录或者导航菜单等,提供了丰富的交互功能,如复选框(checkbox)和单选按钮(radio),以增强用户体验。下面我们将详细探讨这两个库以及与`ajax`动态加载相关的知识...
这些是jQuery对Radio、Checkbox和Select基本的操作方式。在实际应用中,你可能还需要结合DOM遍历、事件冒泡等知识,实现更复杂的交互功能。提供的Demo文件应该包含了这些操作的实例代码,通过查看和实践,可以加深...
本项目名为"Radio/Checkbox Style",基于JavaScript技术实现,旨在提供一种新的、更加吸引人的radio和checkbox样式。这个开源项目可能包含了CSS、JavaScript或HTML文件,用于创建和管理这些定制的控件。通过下载并...
一款非常强大的表单美化插件,点击颜色替换相应的checkbox和radio样式 多个选项来自定义checkbox和radio 8个回调函数支持 6个方法来编程控制 效果详情可参考http://www.xwcms.net/js/bddm/19041.html