onload事件

先看为什么会需要用到onload事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var ele = document.querySelector(".c1");
        console.log(ele);
    </script>
</head>
<body>
<div class="c1">mf</div>
</body>
</html>

页面默认从上至下加载，如上案例先加载script部分，但是i1还未加载完毕没，所以打印null。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
       window.onload = function (){
            ele = document.getElementById("i1")
            console.log(ele.innerHTML);
       }
    </script>
</head>
<body>
<div id="i1">mf</div>
</body>
</html>

等待document即页面所有DOM元素加载完，才执行。

onsubmit事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var ele = document.querySelector(".c1");
            console.log(ele);
        };
    </script>
</head>
<body>
<form action="" id="i1">
    <input type="text" name="user" class="c1">
    <input type="submit">
</form>
<script>
    var form = document.querySelector("#i1");
    var user = document.querySelector(".c1");
    form.onsubmit = function (e) {
        // alert(123)
        if (user.value.length<5){
            alert("用户名的长度应该大于等于5！");
            user.value = "";
            // 阻止默认的提交事件
            // 方式1：
            // return false;
            // 方式2：
            // e.preventDefault()
        }
    }
</script>
</body>
</html>

onchange事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="" id="provice">
    <option value="">请选择省份</option>
    <option value="hubei">湖北省</option>
    <option value="hebei">河北省</option>
    <option value="guangdong">广东省</option>
</select>
<select name="" id="city">
    <option value="">请选择城市</option>
</select>
<script>
    var data = {"hubei":["襄阳","武汉","荆州"],"hebei":["保定","石家庄","廊坊"],"guangdong":["深圳","广州","惠州"]}
     var provice = document.querySelector("#provice");
     var city = document.querySelector("#city");
    provice.onchange = function () {
         console.log(this.value);
         var cities = data[this.value];
         console.log(cities);
         //清空方法
         city.options.length = 1;
         for (var index in cities){
             console.log(cities[index]);
             // 创建标签
             var option = document.createElement("option");
             option.innerHTML = cities[index];
             city.appendChild(option);
         }
    }
</script>
</body>
</html>

onmouse事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 300px;
            height: 300px;
            background-color: orange;
        }
        .container{
            width: 300px;
        }
        .title{
            height: 50px;
            background-color: lightgray;
        }
        .container .list .item1{
            height: 50px;
            background-color: gold;
        }
        .container .list .item2{
            height: 50px;
            background-color: green;
        }
        .container .list .item3{
            height: 50px;
            background-color: #369;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="container">
    <div class="title">标题</div>
    <div class="list hide">
        <div class="item1">item1</div>
        <div class="item2">item2</div>
        <div class="item3">item3</div>
    </div>
</div>
<script>
     var ele = document.querySelector(".c1");
     ele.onmouseover = function () {
         this.style.backgroundColor = "red";
     };
     ele.onmouseleave = function f() {
         this.style.backgroundColor = "orange";
     };
     var title = document.querySelector(".title");
     var list = document.querySelector(".list");
     var container = document.querySelector(".container");
    title.onmouseover = function () {
         list.classList.remove("hide");
    };
    container.onmouseleave = function () {
         list.classList.add("hide");
    }
</script>
</body>
</html>

onkey事件

<input type="text" id="t1"/>
<script type="text/javascript">
    var ele=document.getElementById("t1");
     ele.onkeydown=function(e){
        console.log("onkeydown",e.key)
    };
     ele.onkeyup=function(e){
        console.log("onkeyup",e.key)
    };
</script>

onblur和onfocus事件

<input type="text" class="c1">
<script>
    var ele = document.querySelector(".c1");
    // 获取焦点事件
    ele.onfocus = function () {
        console.log("in")
    };
    // 失去焦点事件
    ele.onblur = function () {
        console.log("out")
    }
</script>

冒泡事件

<div class="c1">
    <div class="c2"></div>
</div>
<script>
    var ele1 = document.querySelector(".c1");
    ele1.onclick = function () {
        alert("c1区域")
    };
    var ele2 = document.querySelector(".c2");
    ele2.onclick = function (event) {
        alert("c2区域");
        // 如何阻止事件冒泡
        event.stopPropagation();
    }
</script>

Python 全栈开发与分析电子书(上)-V2022

05 常用事件

onload事件

onsubmit事件

onchange事件

onmouse事件

onkey事件

onblur和onfocus事件

冒泡事件