html单选按钮触发事件,radio按钮使用onclick和onfocus触发事件的区别

做了一个计算运费的小应用，当点选地区的时候触发计算函数，计算函数会获取该地区对应的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的区别更佳，现行致谢！

运费计算器

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;

}

}

广州	广东	上海	江苏
浙江	安徽	江西	福建
广西	湖南	湖北	海南
北京	天津	重庆	云南
贵州	四川	河南	河北
山东	山西	陕西	辽宁
吉林	黑龙江	甘肃	内蒙古
宁夏	青海	新疆	西藏

重量/kg：

运费/元：

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;

}

}