JavaScriptでよく使われるイベントは何ですか-フロントエンドQ&A-php.cn

JavaScriptでよく使われるイベントは何ですか

青灯夜游

リリース： 2022-02-21 17:37:05

オリジナル

13078 人が閲覧しました

JavaScript で一般的に使用されるイベントは次のとおりです: 1. クリックイベント (onclick および ondblclick)、2. フォーカスイベント (onblur および onfocus)、3. 読み込みイベント (onload)、4. マウスイベント、5. キーボードイベント; 6. イベントの選択と変更; 7. イベントの形成。

JavaScriptでよく使われるイベントは何ですか

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

JS のイベント:

コンセプト: 特定のコンポーネントが特定の操作を実行した後、特定のコードの実行をトリガーします。
イベント: 特定の操作。例: クリック、ダブルクリック、キーボード押下、マウス移動
イベントソース: コンポーネント。例: ボタンのテキスト入力ボックス...
リスナー: コード。
リスニングの登録: イベント、イベントソース、リスナーを組み合わせます。イベントソースでイベントが発生すると、リスナーコードの実行がトリガーされます。

1. よく使用されるイベント

1) クリックイベント:

onclick: クリックイベント
ondblclick: ダブルクリックイベント

2) フォーカスイベント

onblur: フォーカスを失う
onfocus: 要素がフォーカスを獲得します。

3) 読み込みイベント:

onload: ページまたは画像が読み込まれます。

4) マウスイベント:

onmousedown マウスボタンが押されました。
onmouseup マウスボタンを放します。
onmousemove マウスが移動します。
onmouseover マウスを要素の上に移動します。
onmouseout マウスが要素から遠ざかります。

5) キーボードイベント:

onkeydown キーボードのキーが押されました。
onkeyup キーボードのキーが放されます。
onkeypress キーボードのキーが押されてから放されます。

6) 選択および変更イベント

onchange フィールドの内容が変更されます。
onselect テキストが選択されています。

7) フォームイベント:

onsubmit 確認ボタンがクリックされました。
onreset リセットボタンがクリックされました。

2. イベント登録

3.1. イベント登録 (バインディング) とは何ですか?

実際には、イベントが応答したときにどのオペレーションコードを実行するかをブラウザーに指示します。これは、イベント登録またはイベントバインディングと呼ばれます。

3.2. イベントを登録する 2 つの方法 (静的登録イベント、動的登録イベント)

静的登録イベント :イベント応答後のコードにHTMLタグのevent属性を直接割り当てる方法を静的登録といいます。

function sayHello() {
    alert("hello js!");
}
<!--注册事件的第一种方式，直接在标签中使用事件句柄-->
<!--以下代码的含义是：将sayHello函数注册到钮上，等待click事件发生之后，
该函数被浏览器调用。我们称这个函数为回调函数。-->
<input type="button" value="hello" onclick="sayHello()"/>

ログイン後にコピー

イベントの動的登録: は、まず js コードを通じてラベルの dom オブジェクトを取得し、次に dom オブジェクトを通じて取得することを指します。イベント名=function(){} が割り当てられます。イベント応答後のイベントこのコードは動的登録と呼ばれます。

動的登録の基本手順:

1. ラベルオブジェクトを取得します

2. ラベルオブジェクト.イベント名=fucntion() {}

<!--第二种注册事件的方式，是使用纯JS代码完成事件的注册。-->
<input type="button" value="hello1" id="mybtn1"/>
<input type="button" value="hello2" id="mybtn2"/>
<input type="button" value="hello3" id="mybtn3"/>

<script type="text/javascript">
    function dynamic(){
        alert("动态注册事件1");
    }
    // 第一步:先获取这个钮对象()
    /*
        document:是 JavaScript语 言 提 供 的 一 个 对 象 （ 文 档 ), document是 JavaScript语 言 提 供 的 一 个 对 象 （ 文 档 ),
        get: 获 取
        Element:元 素 （ 就 是 标 签 
        By:通 过 。 。 由 。 。 经 。 。 。
        Id: id 属 性
        getElementById: 通 过 id 属 性 获 取 标 签 对
    */
    var btnobj1 = document.getElementById("mybtn1");
    // 第二步:给钮对象的onclick属性赋值
    btnobj1.onclick = dynamic;// 注意:千万别加小括号. btnObj.onclick = doSome();这是错误的写法.
                                // 这行代码的含义是,将回调函数doSome注册到click事件上.

    var btnobj2 = document.getElementById("mybtn2");
    btnobj2.onclick = function(){// 这个函数没名字,叫做匿名函数,这个匿名函数也是一个回调函数.
        alert("动态注册事件2");// 这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用.
    }

    document.getElementById("mybtn3").onclick = function () {
        alert("动态注册事件3");
    }
</script>

ログイン後にコピー

keydown イベントを通じて Enter キー 13 と ESC キー 27 をデモンストレーションする

<body>
<script type="text/javascript">
    // 回车键的键值是13
    // ESC键的键值是27
    window.onload = function () {
      /*  var keyvalue = document.getElementById("key");
        keyvalue.onkeydown = function (event) {
            // 获取键值对象
            alert(event);// 什么键显示都为[object KeyboardEvent]
            // 对于“键盘事件对象"来说,都keyCode属性用来获取键值.
            alert(event.keyCode);//回车键显示13
        }
*/
        var keyvalue = document.getElementById("key");
        keyvalue.onkeydown = function (event) {
            if(event.keyCode == 13){
                alert("正在进行验证")
            }
        }
    }
</script>

<input type="text" id="key"/>

</body>

ログイン後にコピー

[関連する推奨事項: JavaScript 学習チュートリアル]

以上がJavaScriptでよく使われるイベントは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。