ボタンとフォームのイベントをバインドする 2 つの一般的な方法

記事ディレクトリ

序文

コードを記述するとき、対応する機能を実現するために、必然的に一部のボタンやフォームのイベントをバインドする必要があります。その場合、一般的に使用されるイベントとそのバインド方法は何でしょうか? 次に、イベントについて一緒に学びましょう。

1.共通イベント

イベント名	説明する
クリック時	マウスクリックイベント
オンブラー	要素がフォーカスを失います
オンフォーカス	要素がフォーカスを取得します
オンロード	ページまたは画像の読み込みが完了しました
送信時	このイベントはフォームが送信されると発生します。
オンキーダウン	キーボードのキーが押された
マウスオーバーで	マウスを要素の上に移動します
オンマウスアウト	マウスを要素から外す

2. 一般的に使用されるイベントバインディングメソッド

2.1 一般的に使用されるイベントバインド方法 1

最初の方法であっても 2 番目の方法であっても、作成者は例として onblur() のフォーカス喪失イベントを使用します。

バインド方法その1：HTMLタグのイベント属性によるバインド

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>事件绑定练习</title>
</head>
<body>
    <form id="form1" method="post" action="#" onsubmit="form_checking()">
        <table>
            <tr>
                <th><label>用户姓名：</label></th>
                <th>
                    <input id="usernameInput" type="text" name="username" onblur="username_checking()"/><br>
                    <span id="usernameErr" style="display: none"><font color="red">用户名错误！！！</font></span>
                </th>
            </tr>
            <tr>
                <th><label>用户密码：</label></th>
                <th>
                    <input id="passwordInput" type="password" name="password" onblur="password_checking()"/><br>
                    <span id="passwordErr" style="display: none"><font color="red">密码错误！！！</font></span>
                </th>
            </tr>
            <tr>
                <th><input  type="submit" name="submit" value="登录"/></th>
                <th><input  type="reset" name="reset" value="重置"/></th>
            </tr>
        </table>
    </form>

    <script>
        function username_checking(){
    
    
            //设置返回值，以供onsubmit()提交表单使用
            var flag=false;
            //通过id获取用户名输入框元素对象
            var usernameInputEle = document.getElementById("usernameInput");
            //通过id获取用户名错误判定元素对象
            var usernameErrEle = document.getElementById("usernameErr");
            //获取用户名输入框元素对象的输入值
            var username = usernameInputEle.value;
            if(username!=null&&username!=""){
    
    
                //如果用户名不为空和空字符串，则用户名错误判定元素对象不展示
                usernameErrEle.style.display="none";
                flag=true;
            }else{
    
    
                //如果用户名为空或者空字符串，则用户名错误判定元素对象展示
                usernameErrEle.style.display="inline";
                flag=false;
            }
            return flag;
        }
        function password_checking(){
    
    
            //设置返回值，以供onsubmit()提交表单使用
            var flag=false;
            //通过id获取密码输入框元素对象
            var passwordInputEle = document.getElementById("passwordInput");
            //通过id获取密码错误判定元素对象
            var passwordErrEle = document.getElementById("passwordErr");
            //获取密码输入框元素对象的输入值
            var password = passwordInputEle.value;
            if(password!=null&&password!=""){
    
    
                //如果密码不为空和空字符串，则密码错误判定元素对象不展示
                passwordErrEle.style.display="none";
                flag=true;
            }else{
    
    
                //如果密码为空或者空字符串，则密码错误判定元素对象展示
                passwordErrEle.style.display="inline";
                flag=false;
            }
            return flag;
        }
        function form_checking(){
    
    
            return username_checking() && password_checking();
        }
    </script>
</body>
</html>

操作結果:

画像の説明を追加してください

2.2 よく使われるイベントバインド方法2

最初の方法であっても 2 番目の方法であっても、作成者は例として onblur() のフォーカス喪失イベントを使用します。

綴じ方その２：DOM 要素プロパティによるバインド

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>事件绑定练习</title>
</head>
<body>
<form id="form1" method="post" action="#">
    <table>
        <tr>
            <th><label>用户姓名：</label></th>
            <th>
                <input id="usernameInput" type="text" name="username"/><br>
                <span id="usernameErr" style="display: none"><font color="red">用户名错误！！！</font></span>
            </th>
        </tr>
        <tr>
            <th><label>用户密码：</label></th>
            <th>
                <input id="passwordInput" type="password" name="password"/><br>
                <span id="passwordErr" style="display: none"><font color="red">密码错误！！！</font></span>
            </th>
        </tr>
        <tr>
            <th><input  type="submit" name="submit" value="登录"/></th>
            <th><input  type="reset" name="reset" value="重置"/></th>
        </tr>
    </table>
</form>

<script>
    //通过id获取用户名输入框元素对象
    var usernameInputEle = document.getElementById("usernameInput");
    //为用户输入框绑定事件
    usernameInputEle.onblur=username_checking;
    function username_checking(){
    
    
        //设置返回值，以供onsubmit()提交表单使用
        var flag=false;
        //通过id获取用户名错误判定元素对象
        var usernameErrEle = document.getElementById("usernameErr");
        //获取用户名输入框元素对象的输入值
        var username = usernameInputEle.value;
        if(username!=null&&username!=""){
    
    
            //如果用户名不为空和空字符串，则用户名错误判定元素对象不展示
            usernameErrEle.style.display="none";
            flag=true;
        }else{
    
    
            //如果用户名为空或者空字符串，则用户名错误判定元素对象展示
            usernameErrEle.style.display="inline";
            flag=false;
        }
        return flag;
    }

    //通过id获取密码输入框元素对象
    var passwordInputEle = document.getElementById("passwordInput");
    //为密码输入框绑定事件
    passwordInputEle.onblur=password_checking;
    function password_checking(){
    
    
        //设置返回值，以供onsubmit()提交表单使用
        var flag=false;
        //通过id获取密码错误判定元素对象
        var passwordErrEle = document.getElementById("passwordErr");
        //获取密码输入框元素对象的输入值
        var password = passwordInputEle.value;
        if(password!=null&&password!=""){
    
    
            //如果密码不为空和空字符串，则密码错误判定元素对象不展示
            passwordErrEle.style.display="none";
            flag=true;
        }else{
    
    
            //如果密码为空或者空字符串，则密码错误判定元素对象展示
            passwordErrEle.style.display="inline";
            flag=false;
        }
        return flag;
    }

    //通过id获取表单元素对象
    var formEle = document.getElementById("form1");
    //为表单绑定事件
    formEle.onsubmit=form_checking;
    function form_checking(){
    
    
        return username_checking() && password_checking();
    }
</script>
</body>
</html>

操作結果:

画像の説明を追加してください

3. onsubmit()フォームイベントの特殊バインディングメソッド

フォームイベントの特別なバインディングメソッドについて説明する前に、上記の 2 つのバインディングコードを完全に実行してみましょう。

イベントバインディングモードの 1 つの完全な操作: ( 我们看到onsubmit()无法起到表单格式有误时阻止提交的作用)
画像の説明を追加してください

イベントバインディングメソッド 2 は完全に実行されます: (onsubmit() を使用すると、フォームの形式が間違っている場合を防ぐことができることがわかります。）

画像の説明を追加してください

事件绑定一方式実行結果から、実行の効果が私たちが望んでいるようなものではないことがわかります。私たちが望んでいるのは、ユーザー名入力ボックスまたはパスワード入力ボックスの 1 つの項目が入力要件を満たしていない場合、フォームを送信しないことです。、しかし現在、フォームが送信を妨げることはできない、つまり、onsubmit() が実際には機能しないことがわかりました。それでは、実際に機能させるにはどうすればよいでしょうか? 次に、onsubmit() を実際に動作させる方法を見てみましょう。

3.1 onsubmit() を実際に機能させるイベントバインディングメソッド

イベントバインド方法 1: 要素ボックスにイベントを直接追加してイベントバインドを完了する

変更点: 実際には、メソッドの前に return が追加されます。
ここに画像の説明を挿入

完全なコード:

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>事件绑定练习</title>
</head>
<body>
    <form id="form1" method="post" action="#" onsubmit="return form_checking()">
        <table>
            <tr>
                <th><label>用户姓名：</label></th>
                <th>
                    <input id="usernameInput" type="text" name="username" onblur="username_checking()"/><br>
                    <span id="usernameErr" style="display: none"><font color="red">用户名错误！！！</font></span>
                </th>
            </tr>
            <tr>
                <th><label>用户密码：</label></th>
                <th>
                    <input id="passwordInput" type="password" name="password" onblur="password_checking()"/><br>
                    <span id="passwordErr" style="display: none"><font color="red">密码错误！！！</font></span>
                </th>
            </tr>
            <tr>
                <th><input  type="submit" name="submit" value="登录"/></th>
                <th><input  type="reset" name="reset" value="重置"/></th>
            </tr>
        </table>
    </form>

    <script>
        function username_checking(){
    
    
            //设置返回值，以供onsubmit()提交表单使用
            var flag=false;
            //通过id获取用户名输入框元素对象
            var usernameInputEle = document.getElementById("usernameInput");
            //通过id获取用户名错误判定元素对象
            var usernameErrEle = document.getElementById("usernameErr");
            //获取用户名输入框元素对象的输入值
            var username = usernameInputEle.value;
            if(username!=null&&username!=""){
    
    
                //如果用户名不为空和空字符串，则用户名错误判定元素对象不展示
                usernameErrEle.style.display="none";
                flag=true;
            }else{
    
    
                //如果用户名为空或者空字符串，则用户名错误判定元素对象展示
                usernameErrEle.style.display="inline";
                flag=false;
            }
            return flag;
        }
        function password_checking(){
    
    
            //设置返回值，以供onsubmit()提交表单使用
            var flag=false;
            //通过id获取密码输入框元素对象
            var passwordInputEle = document.getElementById("passwordInput");
            //通过id获取密码错误判定元素对象
            var passwordErrEle = document.getElementById("passwordErr");
            //获取密码输入框元素对象的输入值
            var password = passwordInputEle.value;
            if(password!=null&&password!=""){
    
    
                //如果密码不为空和空字符串，则密码错误判定元素对象不展示
                passwordErrEle.style.display="none";
                flag=true;
            }else{
    
    
                //如果密码为空或者空字符串，则密码错误判定元素对象展示
                passwordErrEle.style.display="inline";
                flag=false;
            }
            return flag;
        }
        function form_checking(){
    
    
            return username_checking() && password_checking();
        }
    </script>
</body>
</html>

実行結果:(onsubmit() を使用すると、フォームの形式が間違っている場合を防ぐことができることがわかります。）
画像の説明を追加してください

4. 共通イベントバインディングの小さなバグ

イベントバインディングイベントを正しく使用しない場合、たとえば、バインディングイベント 1 のバインディングメソッドには () を追加する必要がありますが、イベントバインディングメソッド 2 のバインディングメソッドには () を追加しないと問題が発生します。 () を追加する必要がありますが、() を追加すると問題が発生します

4.1 不規則なバインディングイベントによって引き起こされるバグ

バインディングイベントメソッドを 1 つのバインディングイベントで使用するが、バインディングメソッドに () を追加しない場合は、次のようになります。
ここに画像の説明を挿入

実行結果:(この方法は失敗することがわかりました）

画像の説明を追加してください

4.2 2 番目の非標準バインディングイベントによって引き起こされるバグ

イベントをバインドする 2 番目の方法を使用してイベントをバインドしますが、バインドメソッドに () を追加すると、次のようになります。

画像の説明を追加してください

実行結果:(同様に、メソッドが無効になり、onblur() イベントが直接トリガーされて無効になることがわかりました。）

画像の説明を追加してください

したがって、イベントバインディングの正しい使用を規制する必要があります。！！

V. まとめ

イベントバインド方法 1 を使用してイベントをバインドすると、すべてのイベント属性が () で追加されます。

ここに画像の説明を挿入

イベントバインディングメソッド2を使用してイベントをバインドすると、要素の属性は追加されません()

ここに画像の説明を挿入

OK！！！終了！！！