JavaScript之DOM事件类型

cloudOnSkyline

已于 2022-07-09 16:47:38 修改

阅读量344

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端 html

于 2022-06-25 19:15:30 首次发布

本文链接：https://blog.csdn.net/weixin_44827643/article/details/125462800

版权

JavaScript 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

本文主要通过实际案例来介绍JS中DOM绑定事件的类型。

1.onmouseover和onmouseout:鼠标移入和移出事件，效果同CSS提供的hover类似。案例：下拉菜单的制作。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        .dropselect {
            width: 100px;
        }
        
        a {
            text-decoration: none;
        }
        
        li {
            list-style: none;
        }
        
        .dropselect a,
        .dropselect li {
            width: 100px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            display: block;
            color: #666;
            border: 1px solid #DCDCDC;
        }
        
        .dropselect ul {
            display: none;
        }
        
        .dropselect ul li:hover {
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <div class="dropselect">
        <a href="">选择城市</a>
        <ul>
            <li>合肥</li>
            <li>芜湖</li>
        </ul>
    </div>
    <script>
        var f = document.querySelector('div');
        f.onmouseover = function() {
            this.children[1].style.display = 'block';
        }
        f.onmouseout = function() {
            this.children[1].style.display = 'none';
        }
    </script>
</body>

</html>

效果如下图：

2.onfocus和onblur:获取焦点以及失去焦点事件。案例：文本输入时的提示语句，用户点击输入内容时会消失，操作其余部位时会显示。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" value="请输入文字" onfocus="this.value=''" onblur="this.value = '请输入文字'">
    <script>
    </script>
</body>

</html>

3.onmousedown和onmouseup：鼠标按下和鼠标弹起事件。案例：鼠标按下时显示一张图片，松开时显示另一张图片。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <img src="./image1.webp" alt="" width="350px" onmousedown="this.src = './image2.webp'" onmouseup="this.src = './image1.webp'">
</body>

</html>

4.onload:页面加载事件，当页面加载完成后，再执行其中的代码。案例：一般情况，script标签写在html元素标签之后，这样在执行DOM操作时可正常获取页面的元素。但是如果将script标签提前，则DOM的相应操作会失效。此时绑定onload事件可以解决这个问题。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            transition: background-color 0.5s;
        }
    </style>
</head>

<body>
    <script>
        window.onload = function() {
            var div = document.querySelector('div');
            div.onclick = function() {
                this.style.backgroundColor = 'red';
            }
        }
    </script>
    <div></div>

</body>

</html>

5.onchange:内容监测事件，可用于监测input相关值的变化。案例：全选按钮的制作。当点击全选按钮时，页面所有按钮都被选中。取消全选则都不选。同时，当子按钮全部被选中，全选按钮将被选中。只要有一个按钮未被选上，全选按钮则取消选中。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选按钮</title>
</head>

<body>
    <label for="all">全选按钮：</label><input type="checkbox" id="all">
    <div> <label for="button1">按钮1：</label><input type="checkbox" id="button1"></div>
    <div> <label for="button2">按钮2：</label><input type="checkbox" id="button2"></div>
    <div> <label for="button3">按钮3：</label><input type="checkbox" id="button3"></div>
    <div> <label for="button4">按钮4：</label><input type="checkbox" id="button4"></div>
</body>
<script>
    var allSelected = document.querySelector('input');
    var subButtons = document.querySelectorAll('div input');
    allSelected.onchange = function() {
        for (let i of subButtons) {
            i.checked = this.checked;
        }
    };
    for (let i of subButtons) {
        i.onchange = function() {
            var a = true;
            for (let i of subButtons) {
                if (!i.checked) {
                    a = false
                    break
                }
            }
            allSelected.checked = a;
        }
    }
</script>

</html>

6.onclick：点击事件，用户鼠标点击时触发。案例：更换背景图片，当点击页面上的图片时，页面的背景会显示该图。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .image {
            position: fixed;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            width: 200px;
        }
    </style>
</head>

<body>
    <div class="image">
        <div><img src="./bcImage1.webp" alt="" width="200px"></div>
        <div> <img src="./bcImage2.jpeg" alt="" width="200px"> </div>
        <div><img src="./bcImage3.webp" alt="" width="200px"> </div>
    </div>
    <script>
        var imgs = document.querySelectorAll('img');
        var body = document.body;
        for (let i of imgs) {
            i.onclick = function() {
                body.style.backgroundImage = 'url(' + this.src + ')';
                body.style.backgroundSize = 'cover';
            }
        }
    </script>
</body>

</html>

7.onkeydown和onkeyup:键盘按下和弹起事件，另外还有onkeypress,也是键盘按下事件，但是不能识别ctrl、shift或方向键。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 可给文档绑定按键按下弹起事件，通过事件对象可以查看各键对应的ASCII码值 -->
</head>

<body>
    <script>
        document.onkeydown = function(e) {
            console.log(e.keyCode);
            if (e.keyCode == 13) {
                console.log('enter键按下');
            }
        }
        document.body.onkeyup = function(e) {
            if (e.keyCode == 13) {
                console.log('enter键弹起');
            }
        }
    </script>
</body>

</html>

8.oninput事件：监听input表单输入值的变化。在以下案例中，当用户在表单输入值的同时，下面的数据会实时发生变化。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div><input type="text"></div>
    <div class="res"></div>
    <script>
        var input = document.querySelector('input');
        var res = document.querySelector('.res');
        input.addEventListener('input', function() {
            res.innerHTML = input.value;
        })
    </script>
</body>

</html>

效果如图：