做了一个计算运费的小应用，当点选地区的时候触发计算函数，计算函数会获取该地区对应的value，最后算出总运费。但当我使用onfocus事件来触发函数的时候，获取到的value是上一次的value，如下图，默认广州(value=1)为checked，当点击上海(value=4)的时候，打印出来的却是1（本应该是4），使用onclick事件或者再点击一次上海就正常(打印出4)了，我的设想是onfocus先于radio的checked，因此第一次点击(focus)上海时触发函数使用广州的value，函数执行后上海再被选中(checked)，第二次点击上海执行函数时就使用上一次的value。描述可能不是很清晰，大神们试着输入1.3然后选择上海，出来的结果是6.5(错误)，再选择上海才是9.5(正确)。基于这个案例希望大神解释下onfocus在这里的运作原理，能说下onclick和onfocus的区别更佳，现行致谢！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>运费计算器</title>
<style>
body {
background: #6ccac9;
margin: 0;
}
label,
input {
padding: 0;
margin: 0;
}
.wrap {
width: 25%;
margin: 5% auto;
background: #fff;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
padding: 10px 20px;
}
.region-wrap {
margin: 10px auto;
border: 1px solid #ddd;
}
table {
border-spacing: 5px;
}
td {
padding: 5px 7px;
margin: 0;
}
label:hover,
input[name="region"]:hover,
td:hover {
cursor: pointer;
background: #ddd;
}
.region-table {
margin: auto;
}
.weight-wrap {
margin: 10px 0;
}
.weight {
width: 76%;
height: 25px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
border: 1px solid #ddd;
display: inline-block;
font-size: 14px;
padding: 0 5px;
box-sizing: border-box;
}
.result-wrap {
margin: 15px 0;
}
.result-wrap span {
font-size: 20px;
color: #9e1616;
vertical-align: middle;
}
@media screen and (max-width:798px) {
.wrap {
width: 90%;
overflow: hidden;
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="region-wrap">
<table class="region-table">
<tr>
<td>
<input id="guangzhou" type="radio" name="region" value="1" checked="checked" onfocus="javascript: getExFee();">
<label for="guangzhou">广州</label>
</td>
<td>
<input id="guangdong" type="radio" name="region" value="1" onfocus="javascript: getExFee();">
<label for="guangdong">广东</label>
</td>
<td>
<input id="shanghai" type="radio" name="region" value="4" onfocus="javascript: getExFee();">
<label for="shanghai">上海</label>
</td>
<td>
<input id="jiangsu" type="radio" name="region" value="4" onfocus="javascript: getExFee();">
<label for="jiangsu">江苏</label>
</td>
</tr>
<tr>
<td>
<input id="zhejiang" type="radio" name="region" value="4" onfocus="javascript: getExFee();">
<label for="zhejiang">浙江</label>
</td>
<td>
<input id="anhui" type="radio" name="region" value="4" onfocus="javascript: getExFee();">
<label for="anhui">安徽</label>
</td>
<td>
<input id="jiangxi" type="radio" name="region" value="4" onfocus="javascript: getExFee();">
<label for="jiangxi">江西</label>
</td>
<td>
<input id="fujian" type="radio" name="region" value="4" onfocus="javascript: getExFee();">
<label for="fujian">福建</label>
</td>
</tr>
<tr>
<td>
<input id="guangxi" type="radio" name="region" value="4" onfocus="javascript: getExFee();">
<label for="guangxi">广西</label>
</td>
<td>
<input id="hunan" type="radio" name="region" value="4" onfocus="javascript: getExFee();">
<label for="hunan">湖南</label>
</td>
<td>
<input id="hubei" type="radio" name="region" value="4" onfocus="javascript: getExFee();">
<label for="hubei">湖北</label>
</td>
<td>
<input id="hainan" type="radio" name="region" value="5" onfocus="javascript: getExFee();">
<label for="hainan">海南</label>
</td>
</tr>
<tr>
<td>
<input id="beijing" type="radio" name="region" value="5" onfocus="javascript: getExFee();">
<label for="beijing">北京</label>
</td>
<td>
<input id="tianjin" type="radio" name="region" value="5" onfocus="javascript: getExFee();">
<label for="tianjin">天津</label>
</td>
<td>
<input id="chongqing" type="radio" name="region" value="5" onfocus="javascript: getExFee();">
<label for="chongqing">重庆</label>
</td>
<td>
<input id="yunnan" type="radio" name="region" value="5" onfocus="javascript: getExFee();">
<label for="yunnan">云南</label>
</td>
</tr>
<tr>
<td>
<input id="guizhou" type="radio" name="region" value="5" onfocus="javascript: getExFee();">
<label for="guizhou">贵州</label>
</td>
<td>
<input id="sichuan" type="radio" name="region" value="5" onfocus="javascript: getExFee();">
<label for="sichuan">四川</label>
</td>
<td>
<input id="henan" type="radio" name="region" value="5" onfocus="javascript: getExFee();">
<label for="henan">河南</label>
</td>
<td>
<input id="hebei" type="radio" name="region" value="5" onfocus="javascript: getExFee();">
<label for="hebei">河北</label>
</td>
</tr>
<tr>
<td>
<input id="shandong" type="radio" name="region" value="5" onfocus="javascript: getExFee();">
<label for="shandong">山东</label>
</td>
<td>
<input id="shanxi1" type="radio" name="region" value="5" onfocus="javascript: getExFee();">
<label for="shanxi1">山西</label>
</td>
<td>
<input id="shanxi2" type="radio" name="region" value="5" onfocus="javascript: getExFee();">
<label for="shanxi2">陕西</label>
</td>
<td>
<input id="liaoning" type="radio" name="region" value="7" onfocus="javascript: getExFee();">
<label for="liaoning">辽宁</label>
</td>
</tr>
<tr>
<td>
<input id="jilin" type="radio" name="region" value="7" onfocus="javascript: getExFee();">
<label for="jilin">吉林</label>
</td>
<td>
<input id="heilongjiang" type="radio" name="region" value="7" onfocus="javascript: getExFee();">
<label for="heilongjiang">黑龙江</label>
</td>
<td>
<input id="gansu" type="radio" name="region" value="10" onfocus="javascript: getExFee();">
<label for="gansu">甘肃</label>
</td>
<td>
<input id="neimenggu" type="radio" name="region" value="10" onfocus="javascript: getExFee();">
<label for="neimenggu">内蒙古</label>
</td>
</tr>
<tr>
<td>
<input id="ningxia" type="radio" name="region" value="10" onfocus="javascript: getExFee();">
<label for="ningxia">宁夏</label>
</td>
<td>
<input id="qinghai" type="radio" name="region" value="10" onfocus="javascript: getExFee();">
<label for="qinghai">青海</label>
</td>
<td>
<input id="xinjiang" type="radio" name="region" value="15" onfocus="javascript: getExFee();">
<label for="xinjiang">新疆</label>
</td>
<td>
<input id="xizang" type="radio" name="region" value="15" onfocus="javascript: getExFee();">
<label for="xizang">西藏</label>
</td>
</tr>
</table>
</div>
<div class="weight-wrap">
<label for="">重量/kg：</label>
<input class="weight" id="weight" type="text" placeholder="请输入重量" value="" onkeyup="javascript: getExFee();"> </div>
<div class="result-wrap">
<label for="result">运费/元：</label>
<span id="result" class="result"></span>
</div>
</div>
<script>
var regions = document.getElementsByName("region");
var totalFee = document.getElementById("result");
var type = /^\d+(\.\d+)?$/;
var re = new RegExp(type);
var exFee = "";
var weight = "";
var isNum;
var region;
Math.formatFloat = function(f, digit) {
var m = Math.pow(10, digit);
return parseInt(f * m, 10) / m;
}
function getExFee() {
weight = document.getElementById("weight").value;
isNum = re.test(weight);
if (!isNum) {
totalFee.innerHTML = "";
return false;
}
for (var i = 0; i < regions.length; i++) {
if (regions[i].checked == true) {
region = regions[i].value;
}
}
console.log(region);
switch (region) {
case "1":
exFee = 1;
break;
case "4":
exFee = 4;
break;
case "5":
exFee = 5;
break;
case "7":
exFee = 7;
break;
case "10":
exFee = 10;
break;
case "15":
exFee = 15;
break;
}
if (weight <= 0 || weight == "") {
totalFee.innerHTML = "";
return false;
} else if (weight > 0 && weight <= 1.2) {
totalFee.innerHTML = 5.5;
} else {
totalFee.innerHTML = 5.5 + Math.ceil(Math.formatFloat(weight - 1.2,2)) * exFee;
// totalFee.innerHTML = 5.5 + Math.ceil(weight - 1.2) * exFee;
}
}
</script>
</body>
</html>
设置checked属性值(默认的行为)，在focus事件处理函数处理完之后getExFee(event)能获取触发focus事件的DOM元素，进而做相应的逻辑处理
focus事件是不支持冒泡的~~~
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="heilongjiang" type="radio" name="region" value="7" onfocus="javascript: getExFee(event);">
<label for="heilongjiang">黑龙江</label>
<input id="gansu" type="radio" name="region" value="10" onfocus="javascript: getExFee(event);">
<label for="gansu">甘肃</label>
<input id="neimenggu" type="radio" name="region" value="10" onfocus="javascript: getExFee(event);">
<label for="neimenggu">内蒙古</label>
<input id="guangzhou" type="radio" name="region" value="1" checked="checked" onfocus="javascript: getExFee(event);">
<label for="guangzhou">广州</label>
<input id="guangdong" type="radio" name="region" value="1" onfocus="javascript: getExFee(event);">
<label for="guangdong">广东</label>
<input id="shanghai" type="radio" name="region" value="4" onfocus="javascript: getExFee(event);">
<label for="shanghai">上海</label>
<input id="jiangsu" type="radio" name="region" value="4" onfocus="javascript: getExFee(event);">
<label for="jiangsu">江苏</label>
<script>
var regions = document.getElementsByName("region");
function getExFee(event){
//一个元素获取获取焦点,checked为false
console.log("focused input[id=%s] checked:",event.target.id,event.target.checked);
console.log("focused input[id=%s] value:",event.target.id,event.target.value);
}
</script>
</body>
</html>或者
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="heilongjiang" type="radio" name="region" value="7" >
<label for="heilongjiang">黑龙江</label>
<input id="gansu" type="radio" name="region" value="10" >
<label for="gansu">甘肃</label>
<input id="neimenggu" type="radio" name="region" value="10" >
<label for="neimenggu">内蒙古</label>
<input id="guangzhou" type="radio" name="region" value="1" checked="checked" >
<label for="guangzhou">广州</label>
<input id="guangdong" type="radio" name="region" value="1" >
<label for="guangdong">广东</label>
<input id="shanghai" type="radio" name="region" value="4" >
<label for="shanghai">上海</label>
<input id="jiangsu" type="radio" name="region" value="4" >
<label for="jiangsu">江苏</label>
<script>
var regions = document.getElementsByName("region");
document.addEventListener("focus",function(event){
var focusTargetDom=event.target;
if(focusTargetDom.tagName.toLowerCase()=="input"&&focusTargetDom.getAttribute("name")=="region"){
//一个元素获取获取焦点,checked为false
console.log("focused input[id=%s] checked:",focusTargetDom.id,focusTargetDom.checked);
console.log("focused input[id=%s] value:",focusTargetDom.id,focusTargetDom.value);
}
},true);
</script>
</body>
</html>我没有看明白你的意思，但是
1.代码中，fource 的value 不需要用for 去获取，
onfocus="javascript: getExFee(this);"
然后修改 getExFee（） 函数 getExFee(obj) 并修改下面代码
region = obj.value;
/*
for (var i = 0; i < regions.length; i++) {
if (regions[i].checked == true) {
region = regions[i].value;
}
}*/
2，每个 input 里去绑定 onfocus 太麻烦，可以用bind 或类似如下
var i = regions.length;
while( i-- ){
regions[i].onfocus=(getExFee(regions[i]));
}
进行事件绑定