input onchange事件获取事件源实例

Veröffentlicht am | in . |

注意：此实例需要引入jquery文件

请输入拆案份数：














户数 比例
%

需求介绍：在上面的input框中输入拆分的份数，点击确定，下边的table中tbody显示与输入数字对应的行数。在分案总数一定的情况下，在“户数”栏填写户数，“比例栏”自动显示占分按总数的比例，反之亦然。

逻辑分析：输入拆分份数（input的value）>点击确定>循环>dom操作生成新的tr（tr中包含的两个input在id或者class类名中一定要有有别于其他，但一定要一致的部分）>tr中的input（第一个）发生onchange时间的时候（注：输入必须为大于0的数字），计算当前输入数目占总数的比例>将所得比例赋值给input（第二个）；

这个需求本身的难点在于，在一组而且是不固定数目的input中每次onchange的时候，如果用this或者$(this)来获取事件源，由于this会一直冒泡到window，显示的事件源即为window，不能实现onchange事件的来源定位，而event.target(或event.srcElement)没有冒泡，可以实现准确定位事件源，所以这里要用event.target(或event.srcElement)，因为是在jquery中，所以写为$(event.target)||$(event.srcElement)

html部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
<span>请输入拆分份数:</span>
<input type="text" id="houseNum"/><button onclick="SplitFraction()">确定</button>
<table class="listTable" style="width:50%;">
	<thead>
		<td></td>
		<td>编号</td>
		<td>户数</td>
		<td>比例</td>
	</thead>
	<tbody id="splitList">
		
	</tbody>
</table>

js部分:

dom生成tbody部分，代码如下：

1
2
3
4
5
6
7
function SplitFraction(){	
	var sPlitParts = parseInt($('#houseNum').val());
	count = sPlitParts;
		 for(var i=0;i<sPlitParts;i++){
			$('#splitList').append("<tr><td><input type='checkbox'  id='No"+(i+1)+"'/></td><td>"+(i+1)+"</td><td><input type='text'  onchange='changeValue(event)' id='hNum"+(i+1)+"'/></td><td><input type='text' onchange='changeNum(event)'   id='Proportion"+(i+1)+"'/>%</td></tr>");
		}  
}//循环当中每次生成的两个input的id分别为#hNum(i+1)和#Proportion(i+1);

假设：分案总额为100,即：

1
var jiashuju = 100;

input发生onchange事件时：

如果是“户数”栏里的input（注：id为hNum+（i+1）），执行函数为：changeValue(event)，代码如下：

1
2
3
4
5
6
function changeValue(event){
	 var x = $(event.target)||$(event.srcElement); 
	 var val = (x.val())/jiashuju*100;  
	 var tem = (x.attr('id')).substring(4);
	 $('#Proportion'+tem).val(val);
}

如果是“比例”栏里的input（注：id为Proportion+（i+1）），执行函数为：changeNum(event)，代码如下：

1
2
3
4
5
6
function changeNum(event){
	var y = $(event.target)||$(event.srcElement);
	var Num = (y.val())/100*jiashuju;
	var tem2 = (y.attr('id')).substring(10);
	$('#hNum'+tem2).val(Num);
}

本案例考察的知识点有：onchange事件，string拼接，dom操作，substring字符串截取，事件冒泡，获取事件源，event.target与event.srcElement的兼容性。

event.target与event.srcElement的使用范围：

IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的，即：

firefox 下的 event.target = IE 下的 event.srcElement

解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.