欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-28 09:09:27
...

一、向指定的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;
 	}