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;