JavaScript中的事件处理

浅浅的花香味﹌ 2022-08-31 10:00 219阅读 0赞

### JavaScript中的事件处理 ###

*  1 JavaScirpt中的事件
 *  2 事件的注册（绑定）
 *   *  2.1 静态注册事件
     *  2.2 动态注册事件
 *  3 常用事件
 *   *  3.1 onload加载完成事件
     *  3.2 onclick单击事件
     *  3.3 onblur失去焦点事件
     *  3.4 onchange内容发生改变事件
     *  3.5 onsubmit表单提交事件

# 1 JavaScirpt中的事件 #

**事件是电脑输入设备与页面进行交互的响应，我们称之为事件。**

# 2 事件的注册（绑定） #

**事件的注册（绑定）其实就是告诉浏览器，当事件响应后要执行哪些操作的代码，叫做事件注册或事件绑定。事件的注册分为静态注册事件和动态注册事件。**

## 2.1 静态注册事件 ##

**通过html标签的事件属性直接赋予事件响应后的代码，这种方式称为静态注册事件。**

## 2.2 动态注册事件 ##

**是指通过JavaScript代码得到标签的dom对象，然后通过dom对象.事件名 = function () \{ \}这种形式赋予事件响应后的代码，叫做动态注册事件。**

*  动态注册基本步骤：
 *  获取标签对象
 *  标签对象.事件名 = function () \{ \}

# 3 常用事件 #

## 3.1 onload加载完成事件 ##

**onload加载完成事件：页面加载完成之后，常用于做页面js代码初始化操作。**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>onload事件</title>
        <script type="text/javascript">
            function onloadFun() {
         
                alert("静态注册的onload事件，所有代码");
            }
    
            // onload事件动态注册（固定写法）
            // window.onload = function () {
         
            //     alert("静态注册的onload事件，所有代码");
            // }
        </script>
    </head>
    
    <body onload="onloadFun()">
    
    </body>
    </html>

![在这里插入图片描述][7e7584fb837b4d4cb669f55e381c3656.png]

## 3.2 onclick单击事件 ##

**onclick单击事件：常用于按钮的点击响应事件。**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>onclick事件</title>
        <script type="text/javascript">
            function onclickFun() {
         
                alert("静态注册onclick事件");
            }
    
            // 2 动态注册onclick事件
            window.onload = function () {
         
                // 1 获取标签对象
                // getElementById通过id属性获取标签对象
                var btnObj = document.getElementById("btn01");
                // alert(btnObj);
                // 2 通过标签对象.事件名 = function (){}
                btnObj.onclick = function () {
         
                    alert("动态注册onclick事件");
                }
            }
        </script>
    </head>
    <body>
        
        <button onclick="onclickFun()">按钮1</button>
        <button id="btn01">按钮2</button>
    </body>
    </html>

![在这里插入图片描述][9871eb5066ec4b6288cdf8568a26ce7d.png]

## 3.3 onblur失去焦点事件 ##

**onblur失去焦点事件：常用于输入框失去焦点后验证其输入内容是否合法。**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>onblur事件</title>
        <script type="text/javascript">
            // 静态注册失去焦点事件
            function onblurFun() {
         
                console.log("静态注册失去焦点事件");
            }
    
            // 动态注册焦点事件
            window.onload = function () {
         
                // 1 获取标签对象
                var password = document.getElementById("password");
                // 2 通过标签对象.事件名 = function (){}
                password.onblur = function () {
         
                    console.log("动态注册失去焦点事件");
                }
            }
        </script>
    </head>
    <body>
        用户名:<input type="text" onblur="onblurFun()"><br/>
        密码:<input id="password" type="text" onblur=""><br/>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70]

## 3.4 onchange内容发生改变事件 ##

**onchange内容发生改变事件：常用于下拉列表和输入框内容发生改变后的操作。**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>onchange事件</title>
        <script type="text/javascript">
            // 静态绑定
            function onchangeFun() {
         
                console.log("省份已经选好")
            }
    
            // 动态绑定
            window.onload = function () {
         
                // 1 获取标签对象
                var onchangeObj = document.getElementById("city");
                // 2 通过标签对象.事件名 = function (){}
                onchangeObj.onchange = function () {
         
                    console.log("市已经选好")
                }
            }
        </script>
    </head>
    <body>
        请选择你所在省份:
        <select onchange="onchangeFun()">
            <option>--省份--</option>
            <option>云南省</option>
            <option>河南省</option>
            <option>北京市</option>
        </select>
    
        请选择你所在市:
        <select id="city">
            <option>--市--</option>
            <option>曲靖市</option>
            <option>郑州市</option>
            <option>朝阳区</option>
        </select>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 1]

## 3.5 onsubmit表单提交事件 ##

**onsubmit表单提交事件：常用于表单提交前，验证所有表单项是否合法。**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>onsubmit事件</title>
        <script type="text/javascript">
            // 静态注册表单提交事件
            function onsubmitFun() {
         
                // 验证所有表单项是否合法，如果有一个不合法阻止提交
                alert("静态注册表单提交事件---发现不合法");
    
                return false;
            }
    
            // 动态注册表单提交
            window.onload = function () {
         
                // 1 获取标签对象
                var formObj = document.getElementById("form01");
                // 2 通过标签对象.事件名 = function (){}
                formObj.onsubmit = function () {
         
                    alert("动态注册表单提交事件---发现不合法");
    
                    return false;
                }
            }
        </script>
    </head>
    <body>
        
        <form action="http://www.baidu.com" method="get" onsubmit=" return onsubmitFun()">
            <input type="submit" value="静态注册"/>
        </form>
        
        <form action="http://www.baidu.com" id="form01">
            <input type="submit" value="动态注册"/>
        </form>
    </body>
    </html>

![在这里插入图片描述][0141f3b6e9c748248ba2d1551ba4a963.png]

[7e7584fb837b4d4cb669f55e381c3656.png]: /images/20220829/ee3f57f7819543f29e018200203897eb.png
[9871eb5066ec4b6288cdf8568a26ce7d.png]: /images/20220829/686147c74ed74592a2d2cbf2f611a1c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70]: /images/20220829/a53e1301c2f340a6bdb080cb9c66fa36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 1]: /images/20220829/6370259a19e84343acb384d009235f23.png
[0141f3b6e9c748248ba2d1551ba4a963.png]: /images/20220829/a3b17e1423e74a3e8f5e50a187a91f26.png