sort排序默认js笔记js笔记js的简介js(4)

事件

事件源

响应行为

onclick:点击事件

onchange:域内容被改变的事件

需求：实现二级联动

<select id="city">
    <option value="bj">北京</option>
    <option value="tj">天津</option>
    <option value="sh">上海</option>
</select>
<select id="area">
    <option>海淀</option>
    <option>朝阳</option>
    <option>东城</option>
</select>
<script type="text/javascript">
    var select = document.getElementById("city");
    select.onchange = function(){
    var optionVal = select.value;
    switch(optionVal){
        case 'bj':
            var area = document.getElementById("area");
            area.innerHTML = "<option>海淀</option><option>朝阳</option><option>东城</option>";
            break;
        case 'tj':
            var area = document.getElementById("area");
            area.innerHTML = "<option>南开</option><option>西青</option><option>河西</option>";
            break;
        case 'sh':
            var area = document.getElementById("area");
            area.innerHTML = "<option>浦东</option><option>杨浦</option>";
            break;
        default:
            alert("error");
    }
};              

</script>

onfoucus:获得焦点的事件
onblur:失去焦点的事件
    需求： 当输入框获得焦点的时候，提示输入的内容格式
            当输入框失去焦点的时候，提示输入有误
    <label for="txt">name</label>
    <input id="txt" type="text" /><span id="action"></span>
    <script type="text/javascript">
        var txt = document.getElementById("txt");
        txt.onfocus = function(){
            //友好提示
            var span = document.getElementById("action");
            span.innerHTML = "用户名格式最小8位";
            span.style.color = "green";
        };
        txt.onblur = function(){
            //错误提示
            var span = document.getElementById("action");
            span.innerHTML = "对不起 格式不正确";
            span.style.color = "red";
        };
    </script>

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-74752-4.html