JavaScript ｜事件 HTML标签互动

2022 年 07 月 12 日

358 次浏览

3884字数

Q: 什么是事件？
A: 事件就是当我们和HTML标签元素发生交时产生的行为

一些常用事件
// onclick: 单击事件
// ondblclick: 双击事件
// onblur: 失去焦点
// onfocus: 获得焦点
// onchange: 改变
// onload: 加载 <body onload="xxx">
// 当设置了对应的事件之后，会执行目标函数

事件使用示例

<input type="text" onblur="valid()" onfocus="get()">
<button type="button" class="button" onclick="Click('你好')">Button</button>
<select name="" id="" onchange="onChange()">
    <option value="">吉林省</option>
    <option value="">上海</option>
</select>

<script>
    function onChange() {
        alert("has changed");
    }
    function Click(a) {
        alert("123"+a);
    }
    function valid() {
        alert("lost the focus");
    }
    function get() {
        alert("get the focus");
    }
    function onLoad() {
        alert("load success");
    }
</script>

做一个登录页面

<p>
    USERNAME <input type="text" id="username">
</p>
<p>
    PASSWORD <input type="password" id="password">
</p>
<p>
    <input type="button" value="LOGIN" onclick="onClick()">
</p>

<script>
    // 当用户名=admin 密码=123456
    // 提示登录成功
    // 否则提示用户名或密码错误

    let username = document.querySelector("#username");
    let password = document.querySelector("#password");

    function onClick() {
        if (username.value == "admin" && password.value == "123456") {
            console.log("LOGIN SUCCESS");
            return ;
        }
        console.log("LOGIN FAILED, CHECK YOUR USERNAME AND PASSWORD");
    }
</script>

判断 + innerHTML 使用示例

用户名：<input type="text" id="username" onblur="onBlur()">
<span id="span"></span>

<script>
// 在用户名的文本框中输入用户名.
// 如果用户名为admin，则在span中显示用户名已被占用
// 否则，显示用户名可用
// 分析： 需要给文本框添加 onchange, onblur
// 触发函数，像span中写入内容 -> innerText innerHTML

let username = document.querySelector("#username");
let span = document.querySelector("#span");

function onBlur() {
    if(username.value == "admin") {
        span.innerHTML = "<p>用户名已被占用</p>"
    } else {
        span.innerHTML = "<p>用户名可用</p>";
    }
}
</script>

省市区三级联动

<select name="" id="sheng" onchange="onShengChanged()">
    <option value="">--请选择省--</option>
    <option value="jl">吉林省</option>
    <option value="ln">辽宁省</option>
</select>
<select name="" id="shi" onchange="onShiChanged()">
    <option value="">--请选择市--</option>
</select>
<select name="" id="qu">
    <option value="">--请选择区--</option>
</select>

<script>
    let sheng = document.querySelector("#sheng");
    let shi = document.querySelector("#shi");
    let qu = document.querySelector("#qu");
    let chooseSheng = "<option>--请选择省--</option>";
    let chooseShi = "<option>--请选择市--</option>";
    let chooseQu = "<option>--请选择区--</option>";

    function onShengChanged() {
        let temp = chooseShi;
        switch(sheng.value) {
            case "jl":
                temp += "<option value='cc'>长春市</option><option value='jilinshi'>吉林市</option>";
                break;
            case "ln":
                temp += "<option value='sy'>沈阳市</option><option value='dl'>大连市</option>";
                break;
            default:
                break;
        }
        // if(sheng.value == "jl") {
        //     temp += "<option value='cc'>长春市</option><option value='jilinshi'>吉林市</option>";
        // }
        // if(sheng.value == 'ln') {
        //     temp += "<option value='sy'>沈阳市</option><option value='dl'>大连市</option>";
        // }
        shi.innerHTML = temp;
        qu.innerHTML = chooseQu;
    }
    function onShiChanged() {
        let temp = chooseQu;
        switch(shi.value) {
            case "cc":
                temp += "<option>南关区</option><option>宽城区</option><option>朝阳区</option>";
                break;
            case "jilinshi":
                temp += "<option>昌邑区</option><option>丰满区</option><option>船营区</option>";
                break;
            case "sy":
                temp += "<option>和平区</option><option>沈河区</option><option>皇姑区</option>";
                break;
            case "dl":
                temp += "<option>西岗区</option><option>中山区</option><option>沙河口区</option>";
                break;
            default:
                break;
        }
        // if(shi.value == "cc") {
        //     temp += "<option>南关区</option><option>宽城区</option><option>朝阳区</option>";
        // }
        // if(shi.value == 'jilinshi') {
        //     temp += "<option>昌邑区</option><option>丰满区</option><option>船营区</option>";
        // }
        // if(shi.value == 'sy') {
        //     temp += "<option>和平区</option><option>沈河区</option><option>皇姑区</option>";
        // }
        // if(shi.value == 'dl') {
        //     temp += "<option>西岗区</option><option>中山区</option><option>沙河口区</option>";
        // }
        qu.innerHTML = temp;
    }
</script>

JavaScript ｜事件 HTML标签互动