JavaScript-事件

已于 2023-12-03 19:32:06 修改

阅读量25

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-12-03 19:31:43 首次发布

本文链接：https://blog.csdn.net/2202_75661919/article/details/134768890

版权

HTML DOM

HTML DOM事件允许Javascript在HTML文档元素中注册不同事件处理程序。事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。

鼠标事件（常用）

属性	描述
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onmouseover	鼠标移到某元素之上。
onmouseout	鼠标从某元素移开。

例：

单击事件onclick：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <center>
            <input type="button" id="btn" value="按我!">
        </center>
        
        <script>
            var btn = document.getElementById("btn");//获取dom节点
            btn.onclick = function(){//与函数结合
                alert("你好！");//触发后弹窗
            }
        </script>
    </body>
</html>

双击事件ondblclick：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <center>
            <input type="button" id="btn" value="点我两下试试!">
        </center>
        
        <script>
            var btn = document.getElementById("btn");//获取dom节点
            btn.ondblclick = function(){//与函数结合使用
                alert("老铁双击666！");//触发后弹窗
            }
        </script>
    </body>
</html>

鼠标移入事件onmouseover&鼠标移出事件onmouseout：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <center>
            <strong>
                <div style="width: 100px;height: 100px;border: 1px solid black;" id="d">动鼠标试试！<br>鼠标移入事件<br>&<br>鼠标移出事件</div>
            </strong>
        </center>
 
        <script>
            var d = document.getElementById("d"); //获取dom节点
            d.onmouseover = function() { //鼠标移入事件
                d.style.backgroundColor = "red";//鼠标移入触发，将d元素背景色替换为红色
            }
            d.onmouseout = function() {//鼠标移出事件
                d.style.backgroundColor = "blue";//鼠标移出触发，将d元素背景色替换为蓝色
            }
        </script>
    </body>
</html>

键盘事件（常用）

属性	描述
onkeydown	某个键盘按键被按下时。

例：

键盘按下事件onkeydown：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <center>
            <p>在下面输入框输入试试！</p>
            <input type="text" id="t">
            <p id="p1"></p>
        </center>
        
        <script>
            var t = document.getElementById("t");//获取dom节点
            var p1 = document.getElementById("p1");//获取id为p1的dom节点
            t.onkeydown = function(){
                p1.innerText=Math.random();//键盘输入后触发，输出一个随机数，将p1元素替换文本
            }
        </script>
    </body>
</html>

框架/对象（Frame/Object）事件（常用）

属性	描述
onscroll	当文档被滚动时发生的事件。

例：

文档被滚动事件onscroll：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
        div {
            border: 1px solid black;
            width: 200px;
            height: 100px;
            overflow: scroll;
        }
    </style>
    <body>
        <center>
            <p>尝试滚动以下内容</p>
            <div id="d1">
                这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文        
                字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一 
                段文字，这是一段文字，这是一段文字，好了没了
            </div>
            <p>滚动了<span id="s1">0</span>次</p>//统计滚动次数
        </center>
        
        <script>
            var d1 = document.getElementById("d1");//获取dom节点
            var s1 = document.getElementById("s1");//获取id为s1的dom节点
            var num = 0;//定义了初始滚动值
            d1.onscroll = function(){
                s1.innerHTML = num += 1;//每滚动触发一次，滚动值加一
            }
        </script>
    </body>
</html>

表单事件（常用）

属性	描述
onblur	元素失去焦点时触发
onfocus	元素获取焦点时触发
onsubmit	表单提交时触发

例：

元素失去焦点事件onblur：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <center>
            <p>在输入框中输入小写字母，然后离开输入框看看！</p>
            <input type="text" id="t1">
        </center>
        
        <script>
            var t1 = document.getElementById("t1");//获取dom节点
            t1.onblur = function(){
                t1.value=t1.value.toUpperCase();//输入框失去焦点后，将小写字母转为大写字母
            }
        </script>
    </body>
</html>

元素获取焦点事件onfocus：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <center>
            <p>点一下输入框试试！</p>
            <input type="text" id="t1">
        </center>
        
        <script>
            var t1 = document.getElementById("t1");//获取dom节点
            t1.onfocus = function(){
                alert("准备输入什么呀，一直弹窗是因为焦点一直在输入框中哦~");//输入框获取焦点后弹窗
            }
        </script>
    </body>
</html>

表单提交事件onsubmit：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <center>
            <p>当提交表单时，触发函数并弹出提示信息。</p>
            <form action="#" id="f1">
              输入名字: <input type="text">
              <input type="submit" value="提交">
            </form>
        </center>
        
        <script>
            var f1 = document.getElementById("f1");//获取dom节点
            f1.onsubmit = function(){
                alert("表单提交成功！");//提交表单时触发，弹窗，然后转到提交页面，现为#，故不跳转
            }
        </script>
    </body>
</html>