javascript - radio按钮使用onclick和onfocus触发事件的区别-PHP中文网问答

全部回复(2)

迷茫2017-04-11 10:28:02 2楼

我没有看明白你的意思，但是
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]));
            }

进行事件绑定

赞 +0

添加回复

高洛峰2017-04-11 10:28:02 1楼

设置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>

赞 +0

添加回复

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