同时兼容IE和FireFox的事件处理event代码--添加文件上传例子

一、向指定的table中插入tr和td

1. insertRow

　　insertRow() 方法用于在表格中的指定位置插入一个新行。

语法

　　tableObject.insertRow(index)

返回值

　　返回一个 TableRow，表示新插入的行。

说明

　　该方法创建一个新的 TableRow 对象，表示一个新的 <tr> 标记，并把它插入表中的指定位置。 　　新行将被插入 index 所在行之前。若 index 等于表中的行数，则新行将被附加到表的末尾。 　　如果表是空的，则新行将被插入到一个新的 <tbody> 段，该段自身会被插入表中。

抛出

　　若参数 index 小于 0 或大于等于表中的行数，该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。

2. insertCell

定义和用法

　　insertCell()方法用于在 HTML 表的一行的指定位置插入一个空的 <td> 元素。

语法

　　tablerowObject.insertCell（index）返回值 　一个 TableCell 对象，表示新创建并被插入的 <td> 元素。

说明

　　该方法将创建一个新的 <td> 元素，把它插入行中指定的位置。新单元格将被插入当前位于 index 指定位置的表元之前。如果 index 等于行中的单元格数，则新单元格被附加在行的末尾。 　　请注意，该方法只能插入 <td> 数据表元。若需要给行添加头表元，必须用 Document.createElement（） 方法和 Node.insertBefore（） 方法（或相关的方法）创建并插入一个 <th> 元素。

抛出

　　若参数 index 小于 0 或大于等于行中的的表元数，该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。

 

3. deleteRow

       deleteRow() 方法用于从表格删除指定位置的行。

 

 

二、事件event在IE和FireFox中的兼容性问题

 

问题详细描述:
 

        window.event无法在firefox上运行W3C不支持windows.event。

 

解決方法：

      可写成如下三种方式：

          ① 传入event参数

     

function testEvent(evt) {
         evt = evt ? evt : (window.event ? window.event :null);alert(evt);
 }

 <input type="button" value="测试event" onclick="javascript:testEvent(event)"/>

         

     ②不传event参数
         

var evt = window.event || arguments.callee.caller.arguments[0]; //获取event对象

 

        ③ 自定义event方法

   

function getEvent(){     
    if(document.all)    
    	return window.event;        
    func=getEvent.caller;            
    while(func!=null){    
      	var arg0=func.arguments[0];
        if(arg0){
           if((arg0.constructor==Event || arg0.constructor==MouseEvent)
             || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){    
                return arg0;
            }
        }
      	func=func.caller;
    }
    return null;
}


var evt = getEvent();// 获取event对象

 

     IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性

三、添加文件上传例子

upload.html

<script type="text/javascript" src="js/multipleUpload.js"></script>
<script type="text/javascript">
	  function save() {
	  	var the_inputs = document.getElementsByTagName("input");// 获取所有input的标签
	  	for(var n=0; n<the_inputs.length; n++){
	  			if(the_inputs[n].type == "file"){
	  				if(the_inputs[n].value == "") {
	  					alert("附件不能为空！");
	  					return false;	
	  				}	
	  			}
	  	}	  	
	 	}
	 	
	 	function testEvent(evt) {
       evt = evt ? evt : (window.event ? window.event : null);
       alert(evt);
    }
</script>

 

<tr>
    <td>
    	 <label for="_control_file" class="dialog_label">附件:</label>
       <div id="fileDiv" >
       		<table id="conditionTable"  class="sort-table" ></table>
       </div>
       <a href="javascript:void(0);" onclick="addFile();" class="file">添加附件</a>
    </td>
   </tr>
   <tr>
   	<td><input type="button" class="button" name="saveForm" value="保存" onClick="save()"/></td>	
   	<td><input type="button" class="button" value="测试event" onClick="javascript:testEvent(event)"/></td>	
   </tr>

 multipleUpload.js

/* 向指定的table中插入tr和td */

	var i = 0;
	
	function addFile() {
		i++;
		currRow=document.getElementById('conditionTable').insertRow(0);// 在表格的开头插入一个新行
		cellc=currRow.insertCell(0);// 表的一行的指定位置插入一个空的 <td> 元素
		cellcContext="<input type='file' id='file_com' contentEditable='false'  name='file("
		    + (i - 1)
		    + ")' size='65'>&nbsp;&nbsp;<button onclick='javascript:removeFile(event);'>删除</button><br>";
		cellc.innerHTML=cellcContext;
		// onclick='removeFile();'
	}
	
	function findTD(o) {
		if (o.tagName=="TR" || o.tagName=="TABLE") // event.srcElement.tagName捕获活动标记名称
		   return;
		if (o.tagName=="TD")
		   return (o);
		else
		   return (o.parentElement);// 鼠标所在对象的上一个对象
	}
	
	function removeFile(evt) {
		evt = evt ? evt : (window.event ? window.event : null);// 传event参数(方法一)
		//var evt=window.event || arguments.callee.caller.arguments[0]; // 不传event参数(方法二)
		//var evt=getEvent();// 获取event对象(方法三)
		
		var element=evt.srcElement || evt.target;// FF中的event有这个target属性
		o=findTD(element);
		document.getElementById('conditionTable').deleteRow(o.parentElement.rowIndex * 1);
	}
	
	function getEvent(){     //同时兼容ie和ff的写法
    if(document.all)    
    	return window.event;        
    func=getEvent.caller;            
    while(func!=null){    
      	var arg0=func.arguments[0];
        if(arg0){
           if((arg0.constructor==Event || arg0.constructor==MouseEvent)
             || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){    
                return arg0;
            }
        }
      	func=func.caller;
    }
    return null;
 	}