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

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

ホームページ

ウェブフロントエンド

フロントエンドQ&A

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

Feb 21, 2022 pm 05:37 PM

javascript イベント

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

ログイン後にコピー

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

動的登録の基本手順:

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

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

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

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

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

    document.getElementById(&quot;mybtn3&quot;).onclick = function () {
        alert(&quot;动态注册事件3&quot;);
    }
&lt;/script&gt;

ログイン後にコピー

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

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

&lt;input type=&quot;text&quot; id=&quot;key&quot;/&gt;

&lt;/body&gt;

ログイン後にコピー

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

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。