JavaScriptのイベントハンドラ/イベントリスナーの簡単なセット

ここでは、イベントの設定に対処するためのいくつかの方法があります。

HTML要素の属性として指定（イベントハンドラ）
指定されたDOM要素の属性（イベントハンドラ）
EventTarget.addEventListener（）によって指定された（イベントリスナー）

次は、簡単にさまざまな方法を説明します。

まず、HTML要素に属性を指定します

指定されたHTML要素の属性のイベントハンドラは、イベントハンドラを設定する最も簡単な方法の一つです。

< ID = "テスト" HREF = "https://www.baidu.com" のonclick = "アラート（ 'バー'）;警告（ 'バズ'）" >百度一下</ A >

あなたは、複数のイベントハンドラが含まれている場合は、セミコロンで区切られます。もちろん、事前に別の方法あなたは問題がある可能性がないであろう機能を定義した後、関数を実行します。

< 本体ID = "BO" > 
    < ID = "テスト" HREF = "https://www.baidu.com" onclickの= "F（）" >百度一下</ A > < スクリプト> 関数F（）{ 
        window.alert（" ページ転送" ）;
        返す真; 
    } </ スクリプト>

イベントハンドラがfalseを返した場合、イベントのデフォルト動作はキャンセルされます。次の例では、イベントは、イベントをジャンプするハイパーリンクを指します。

< 本体ID = "BO" > 
    < ID = "テスト" HREF = "https://www.baidu.com" のonclick = "戻りF（）" >百度一下</ A > <！ - のonclick =」リターンF（）」将onclickの视为函数- > < スクリプト> 関数F（）{ 
        のwindow.alert（" ページ転送" ）。
        リターンはfalse ; 
    } </ スクリプト>

第二に、指定されたDOM要素の属性

ページが別にHTMLファイルを使用し、JavaScriptファイルの場合は、メンテナンス性を向上するために、HTMLファイル内に小さなJavaScriptコードとして使用する必要があります。したがって、イベントハンドラがすべてのJavaScriptで書かれている設定することが最善です。

イベントハンドラは、属性ノードとして指定することができます。

< ボディID = "BO" > 
    < A ID = "テスト" HREF = "https://www.baidu.com" >百度、</ A > 
< スクリプト> 
    VAR のdoIt = のdocument.getElementById（' テスト' ）。
     関数F（）{ 
        のwindow.alert（' STOPページ転送' ）;
         戻り 偽;    / * 同様に、ハイパーリンクがジャンプ偽達成戻らない* / 
    } 
    doit.onclick = ; F
 </スクリプト>

最初の2つの方法が間違っているように、イベントハンドラが設定されていることに注意してください。

    doit.onclick = F（）; //関数の戻り値を取得
    doit.onclick = "Fを（）"; // 純粋な列割当
    doit.onclick = F; //正しい、基準関数が得られます。

HTMLイベントハンドラはDOM要素の属性を指定されたプロパティが指定されている場合は、HTMLのメモの内容の属性が上書きされます。このより「指定」機能を達成するためにイベントリスナーを使用する必要があります。

EventTarget.addEventListenerによって指定されたIII（）

あなたが唯一の治療操作を指定することができるなら、複雑な挙動に対応することは困難です。この欠点を補うために、我々は、DOMレベル2にEventTarget.addEventListener（）メソッドを定義しました。

< 本体ID = "BO" > 
    < ID = "テスト" HREF = "https://www.baidu.com" >百度一下</ A > < スクリプト> VAR のdoIt = のdocument.getElementById（' テスト' ）。
    関数F（）{ 
        のwindow.alert（' ストップページ転送' ）。
        返す真; 
    } 機能（）{ 
        のwindow.alert（' HelloWorldの' ）。
        

     
    リターン trueに; 
    } 
    doit.addEventListener（「クリック」、F、偽に）; / * 最初のパラメータが登録されたイベントである、2番目のパラメータが登録されたイベントハンドラである、第三のパラメータが導入されない* / 
    doit.addEventListener（' クリック' 、A、falseに）; / * 複数のリスナーを登録* / 
</ スクリプト>

JavaScriptのイベントハンドラ/イベントリスナーの簡単なセット

おすすめ