因为要兼容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;
- }
时间: 2024-11-04 21:22:54