JavaScript学习三（js dom常用事件操作方法）

最新推荐文章于 2024-06-08 16:17:53 发布

踟蹰千年

最新推荐文章于 2024-06-08 16:17:53 发布

阅读量294

点赞数 1

分类专栏： # 前端-javascript

本文链接：https://blog.csdn.net/baiyan3212/article/details/82882900

版权

前端-javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Dom鼠标事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .btn {
            width: 140px;
            height: 50px;
            background: red;
            line-height: 50px;
            font-size: 18px;
            text-align: center;
            margin-top: 30px;
            cursor: pointer;
            color: blue;
            border-radius: 5px;
        }

        .btn2 {
            width: 140px;
            height: 50px;
            background: blue;
            line-height: 50px;
            font-size: 18px;
            text-align: center;
            margin-top: 30px;
            cursor: pointer;
            color: red;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<input type="button" value="弹出" onclick="alert('我是按钮')"/>
<div id="btn" class="btn" onmousemove="mouseoverFn(this)" onmouseout="mouseoutFn(this)">按钮</div>
<script>
    function mouseoverFn(btn) {
        btn.className = "btn2"
    }

    function mouseoutFn(btn) {
        btn.className = "btn"
    }
</script>
</body>

</html>

鼠标放上

DOM 0级事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .btn {
            width: 140px;
            height: 50px;
            background: red;
            line-height: 50px;
            font-size: 18px;
            text-align: center;
            margin-top: 30px;
            cursor: pointer;
            color: blue;
            border-radius: 5px;
        }

        .btn2 {
            width: 140px;
            height: 50px;
            background: blue;
            line-height: 50px;
            font-size: 18px;
            text-align: center;
            margin-top: 30px;
            cursor: pointer;
            color: red;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div id="btn" class="btn">开锁</div>
</body>
<script>
    /**
     * dom 0 级事件 指的就是 先取出dom元素再指定事件，而不是现在标签内部
     */
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        if (this.innerHTML == "开锁") {
            this.className = "btn2";
            this.innerHTML = "上锁"
        } else {
            this.className = "btn";
            this.innerHTML = "开锁"
        }
    }
</script>
</html>

鼠标点击按钮后

window.onload()事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<script>
    /**
     * 在页面加载完以后执行 会先执行后面的 执行完毕后再执行onload        里面的事件
     */
    window.onload = function () {
        var box = document.getElementById("box");
        box.onclick = function () {
            alert("这是一个DIV");
        }
    }
</script>
<body>
<div id="box">div</div>
</body>
</html>

onchange()事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body id="bgChange">
<div style="font-size: 40px;">
    <label>请选择你想要的背景色</label>
    <select id="selectColor" style="font-size: 30px;">
        <option>请选择</option>
        <option value="红色">红色</option>
        <option value="黄色">黄色</option>
        <option value="蓝色">蓝色</option>
        <option value="黑色">黑色</option>
        <option value="绿色">绿色</option>
    </select>
</div>

<script>
    var bg = document.getElementById("bgChange");
    var selectColor = document.getElementById("selectColor");
    selectColor.onchange = function () {
//				var bgColor = this.value;
        var bgColor = this.options[this.selectedIndex].value;
        console.log(bgColor);
        if (this.value == '红色')
            bg.style.backgroundColor = 'red';
        if (this.value == '黄色')
            bg.style.backgroundColor = 'yellow';
        if (this.value == '蓝色')
            bg.style.backgroundColor = 'blue';
        if (this.value == '黑色')
            bg.style.backgroundColor = 'black';
        if (this.value == '绿色')
            bg.style.backgroundColor = 'green';
    }
</script>
</body>
</html>

表单获得焦点onfocus() 失去焦点事件 onblur()

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            padding-left: 50px;
        }

        .left, .tips {
            float: left;
        }

        .left {
            padding-right: 20px;
        }

        .tips {
            display: none;
        }
    </style>
    <script>
        window.onload = function () {
            var telephone = document.getElementById("telephone");
            var tip = document.getElementById("tip");
            telephone.onfocus = function () {
                tip.style.display = 'block';
            }
            telephone.onblur = function () {
                if (this.value.length == 11 && isNaN(this.value) == false) {
                    tip.innerHTML = '√'
                } else {
                    tip.innerHTML = '×'
                }
            }
        }
    </script>
</head>
<body>
<div id="box" class="box">
    <div class="left">
        手机号码:<input type="text" id="telephone" placeholder="请输入手机号码"/>
    </div>
    <div class="tips" id="tip">
        请输入手机号
    </div>
</div>
</body>
</html>

键盘事件

定时事件

dom节点

添加追加子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div">
    <p id="p1">段落1</p>
    <p id="p2">段落2</p>
</div>
<button id="button1">按钮</button>
<script>
    var button1 = document.getElementById("button1");
    var p1 = document.getElementById("p1");
    var p2 = document.getElementById("p2");
    var div = document.getElementById("div");
    button1.onclick = function () {
        var p3 = document.createElement("p");
        var text = document.createTextNode("段落3");
        p3.appendChild(text);
        div.appendChild(p3);
    }
</script>
</body>
</html>

点击后

踟蹰千年

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习三（js dom常用事件操作方法）

Dom鼠标事件&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .btn { width: 140px;
复制链接

扫一扫