DOM之几个事件的应用

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.c1 {
height: 200px;
width: 200px;
border-radius: 50%;
}

.bg_red {
background-color: red;
}

.bg_green {
background-color: green;
}
</style>
</head>
<body>
<input type="button" id="b1" value="开关" onclick="change();">
<input type="button" id="b2" value="开关">
<div class="c1 bg_red"></div>

<script>
function change() {
//找到c1这个便签
var c1Ele = document.getElementsByClassName('c1')[0];
//修改classlist
c1Ele.classList.toggle("bg_green");
}

//通过js代码绑定事件
var b2Ele = document.getElementById('b2');

b2Ele.onclick = ()=>
{
change();
}

</script>
</body>
</html>

onclick事件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<input type="text" id="i1" value="海飞丝" onfocus="f(this);">
<input type="text" id="i2" value="辣条" onfocus="f(this);">

<input type="text" id="i1" value="海飞丝" >
<input type="text" id="i2" value="辣条">

<script>
    // function f(
    //
    // self
    // )
    // {
    //     self.value = '';
    //
    // }

    //给i1设置获取光标的事件
    var i1Ele = document.getElementById('i1');
    i1Ele.onfocus = function () {
        //将自己的value值设置为""
        this.value = "";
    };
    //给i1绑定一个失去光标焦点的事件
    i1Ele.onblur = function () {
        this.value = '海飞丝'
    }
</script>

</body>
</html>

onfocus&onblur

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<select id="province">
    <option>请选择省：</option>
</select>

<select id="city">
    <option>请选择市：</option>
</select>

<script>
    var s1Ele = document.getElementById('province');
    var s2Ele = document.getElementById('city');

    var data = {"上海": ["黄浦区", "静安区"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
    //将省直辖市数据填充到第一个select中
    for (let k in data) {
        console.log(k);
        //创建option标签
        let tmp = document.createElement('option');
        tmp.innerText = k;
        //将创建的tmp添加到 第一个select中
        s1Ele.appendChild(tmp);
    }

    //当第一个select框的值发生改变之后才去更新第二个select框
    s1Ele.onchange = function () {
        //清空第二个select框的option选项
        s2Ele.innerHTML = "";
        let p = document.createElement("option");
        p.innerText = "请选择市";
        s2Ele.appendChild(p);
        //拿到第一个select框的值是什么
        console.log(this.value);
        let provine = this.value;

        //将省　对应的市信息，填充到第二个select中
        for (let i=0;i<data[provine].length;i++) {
            let tmp = document.createElement('option');
            tmp.innerText = data[provine][i];
            s2Ele.appendChild(tmp);
        }

    }
</script>
</body>
</html>

onchange

DOM之几个事件的应用

猜你喜欢