JavaScript イベントは何で構成されていますか?-フロントエンドQ&A-php.cn

JavaScript イベントは何で構成されていますか?

青灯夜游

リリース： 2021-12-07 17:19:45

オリジナル

3133 人が閲覧しました

JavaScript では、イベントはイベントソース、イベントタイプ、イベントハンドラーの 3 つの部分で構成されます。「イベントソース」はイベントをトリガーする要素を指し、「イベントタイプ」はイベントがトリガーされる方法を指し、「イベントハンドラー」はイベントがトリガーされた後に実行されるコード (関数の形式) を指します。。

JavaScript イベントは何で構成されていますか?

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

イベントとは何ですか?

イベントとは、JavaScript によって検出できる動作を指し、「トリガー応答」メカニズムです。これらの動作は、ページの読み込み、マウスのクリック/ダブルクリック、特定の領域上でのマウスポインタのスライドなどの特定のアクションを指します。これは、ページのインタラクティブな効果を実現する上で非常に重要な役割を果たします。

イベントは、イベントソース、イベントタイプ、イベントハンドラーの 3 つの部分で構成されており、「イベントの 3 要素」とも呼ばれます。

#イベントの 3 つの要素

イベントソース: イベントをトリガーする要素
イベントタイプ: イベントのトリガー方法 (マウスクリックやキーボードクリックなど)
イベントハンドラー: イベントがトリガーされた後に実行されるコード (関数形式) )

上記の 3 つの要素は、単純に「誰がイベントをトリガーしたか」、「どのようなイベントがトリガーされたか」、「イベントがトリガーされた後に何をするか」として理解できます。

例: ボタンをクリックして div の色を変更します

イベントソース: ボタン要素
イベントタイプ: マウスクリック
イベントハンドラー: test(eventObj)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>鼠标事件</title>
    <script type="text/javascript">
        //js如何访问元素的style属性，进行样式修改
        function test(eventObj) {
            //怎么知道button1被按，还是button2被按下
            //window.alert(eventObj.value);
            if(eventObj.value == "黑色") {
                //获取div1
                var div1 = document.getElementById("div1");
                div1.style.background = "black";
            } else if(eventObj.value == "红色") {
                var div1 = document.getElementById("div1");
                div1.style.background = "red";
            }
        }
    </script>
</head>
<body>
    <div id="div1" style="width: 400px; height: 300px; background: red;">div1</div>
    <input type="button" value="黑色" onclick="test(this)" />
    <input type="button" value="红色" onclick="test(this)" />
</body>
</html>

ログイン後にコピー

JavaScript イベントは何で構成されていますか?