js常用事件演示

最新推荐文章于 2025-04-14 11:19:33 发布

小青日禾

最新推荐文章于 2025-04-14 11:19:33 发布

阅读量725

点赞数 16

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_73245042/article/details/135388533

js 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了JavaScript中常见的DOM事件，如onblur（失去焦点）、onclick（点击）、onchange（内容改变）、ondblclick（双击）、onfocus（获取焦点）、onload（页面加载）、onkeyup（键盘弹起）、onselect（选择）等，并提供了示例代码来展示它们的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是事件？

事件是发生在你正在编程的系统中的事情——当事件发生时，系统产生（或“触发”）某种信号，并提供一种机制，当事件发生时，可以自动采取某种行动（即运行一些代码）。事件是在浏览器窗口内触发的，并倾向于附加到驻留在其中的特定项目。这可能是一个单一的元素，一组元素，当前标签中加载的 HTML 文档，或整个浏览器窗口。有许多不同类型的事件可以发生。

比如说你鼠标放在放在一个元素上面，他会进行变换，或者说你在键盘上按下一个按键，发生反应，这些是事件。

JavaScript有哪些事件

事件	用法
onblur	在对象失去输入焦点时触发。
onclick	在用户用鼠标左键单击对象时触发。
onchange	当对象或选中区的内容改变时触发。
ondblclick	当用户双击对象时触发。
onfocus	当对象获得焦点时触发。
onload	在浏览器完成对象的装载后立即触发。
onkeyup	当用户释放键盘按键时触发。
onselect	当这个被选中区改变时触发。
onunload	在对象卸载前立即触发。
onmouseover	当用户将鼠标指针移动到对象内时触发。
onmouseout	当用户将鼠标指针移出对象边界时触发。

onblur：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    //onblur--在失去焦点时触发
    function fun(){
        var in2=document.getElementById("in2");
        alert("in2此时输入的值："+in2.value);
    }
</script>
</head>
<body>
<input id="in2" type="text" onblur="fun()" />

</body>
</html>

运行：

onclick：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //onclick 在元素被点击时触发
        function bianSmall(){
            var img1=document.getElementById("img1");
            img1.style.width="50px";
            img1.style.height="50px";
        }
    </script>
</head>
<body>
<img id="img1" onclick="bianSmall()"  src="29.jpg"/>

</body>
</html>

运行的时候点击一下图片就可以看到效果：

点击后：

onchange:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        //onchange--输入框内容发生改变时触发
        function fun(){
            var in2=document.getElementById("in2");
            alert("in2此时输入的值："+in2.value);
        }
    </script>
</head>
<body>
<input id="in2" onchange="fun()" type="text"/>
</body>
</html>

这个和onblur是有区别的，这个是触发这个事件

ondbclick:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //ondbclick 在元素被双击时触发
        function bianDiv(){
            var div1=document.getElementById("div1");
            div1.style.backgroundColor="red";
        }
    </script>
</head>
<body>
<div id="div1" ondblclick="bianDiv()" style="width: 100px; height: 100px;background-color: orange">
</div>
</body>
</html>

双击前：双击后：

onfocus：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">
        //获取焦点事件onfocus
        var in1=document.getElementById("in1");
        var in2=document.getElementById("in2");
        var in3=document.getElementById("in3");
        var in4=document.getElementById("in4");
        function fun1(){
            console.log("====in1获取到焦点===");
        }
        function fun2(){
            console.log("====in2获取到焦点===");
            console.log("in1输入的值是==="+in1.value);
        }
    </script>
</head>
<body>
<input id="in1" onfocus="fun1()" type="text"/>
<input id="in2" onfocus="fun2()" type="text"/>
</body>
</html>

浏览器运行右击检查打开控制台看效果

onload：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">
        window.onload=function(){
            alert("页面加载完成了");
        }
    </script>
</head>
<body>
</body>
</html>

onkeyup:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //键盘弹起事件onkeyup
        function fun(){
            var in1=document.getElementById("in1");
            console.log(in1.value);
        }
    </script>
</head>
<body>
<input id="in1" onkeyup="fun()" type="text"/>
</body>
</html>

onselect：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function fun(){
            var in1=document.getElementById("in1");
            console.log(in1.value);
        }
    </script>
</head>
<body>
<input id="in1" type="text" onselect="fun()"/>
</body>
</html>

运行后打开控制台：在text框输入后选中在输入其他的就会显示之前的值