js的事件

最新推荐文章于 2023-06-02 18:13:07 发布

Keeling1720

最新推荐文章于 2023-06-02 18:13:07 发布

阅读量187

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_44741023/article/details/117133357

版权

JavaScript 专栏收录该内容

32 篇文章 2 订阅

订阅专栏

文章目录

js的事件

js的事件

事件：电脑输入设备与页面进行交互的响应。
常用的事件：

onload：加载完成事件，常用于做页面js代码的初始化
onclick：单击事件，常用于按钮点击响应
onchange：内容改变事件，常用于下拉框和输入框内容改变的响应
onblur：失去焦点事件，常用于输入框失去焦点后验证内容合法性
onsubmit：表单提交事件，常用于表单提交，验证表单内容合法性

事件的注册

要想对事件进行响应，首先我们需要对事件进行注册。即告诉浏览器，当某个事件被触发后，要执行哪些操作。

事件的注册分为静态和动态两种：

静态：通过html标签的事件属性直接赋值事件响应后的代码，属于静态注册。
动态：通过js代码，通过得到标签的dom对象，再通过dom对象.事件名=function(){}这种形式赋值的事件响应代码，属于动态注册。

动态注册的基本步骤：

获取标签对象
标签对象.事件名=function(){}

静态注册

onload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onLoadFunction() {
            alert('静态注册onLoad方法')
        }
    </script>
</head>
<!--静态注册-->
<body onload="onLoadFunction();">

</body>
</html>

运行：
在这里插入图片描述

onclick

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //静态
        function onclickFunction() {
            alert('静态注册onclick事件')
        }
        //动态
        window.onload = function () {
            const btnObj = document.getElementById('btn2');
            btnObj.onclick = function () {
                alert('动态注册onclick事件')
            }
        }
    </script>
</head>
<body>
    <button onclick="onclickFunction()">按钮一</button>
    <button id = 'btn2'>按钮二</button>
</body>
</html>

点击按钮一后显示：
在这里插入图片描述

onchange

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onchangeFun() {
            alert('你怎么又换语言了')
        }
    </script>
</head>
<body>
    <text>请选择您最擅长的语言</text>
    <select onchange="onchangeFun()">
        <option value="c">C</option>
        <option value="java">Java</option>
        <option value="python">Python</option>
        <option value="c++">C++</option>
    </select>
</body>
</html>

换语言后显示：
在这里插入图片描述

onblur

onsubmit

这两个就不做过多介绍了，反正跟上面差不多，无非就是用的标签和场景不太一样。

动态注册