Event Handing

3062 ワード
テキストリンク

Event Handing


  • addEventListner
    addEventLister()メソッド指定したイベントが発生したときに設定された関数を呼び出す

  • 構文
    document.addEventListener(event, function, useCapture);
    event:応答するイベントのタイプ
    function:イベント発生時に実行する関数
    useCapture:eventTargetに送信する前に、タイプ内のイベントが送信されたかどうかを示す登録された関数(省略可能).

  • .innerText
    htmlタグを解釈せずにテキストを直接出力する

  • .innerHTML
    htmlタグの解釈と出力

  • .preventDefault
    イベントをキャンセルできる場合は、伝播をブロックせずにイベントをキャンセルします.

  • .createElement
    HTMLタグの生成
    documnet.createElement('br'); // br태그 생성

  • .toDataURL
    このメソッドは、パラメータに格納されたフォーマット(デフォルトはPNG)を含む画像表示のデータURLを返します.
    canvas.toDataURL(type, encoderOptions);

  • type
    デフォルトのフォーマットタイプはimage/pngです

  • encoderOptions
    表示画質(0-1)
    既定値は0.92

  • .href
  • .download

    • Event


    JavaScript関連イベントの収集
    定期更新の計画

  • UI event
    ユーザーがWebページではなくUIと対話するときに発生します.
    イベントの説明スクロールユーザーがページを上下にスクロールすると、loadページのロードが完了すると、ページのアンインストール(新しいページを要求する場合)がアンインストールされ、errorブラウザでjavascriptエラーや要求されていないリソースに遭遇した場合、resizeブラウザのウィンドウサイズが調整されます.

  • キーボードイベント
    ユーザーがキーボードを使用しているときに発生します.
    イベント説明keyupキーを入力すると、keydownユーザが初めてキーを押すと、keypressユーザが押したキーの文字が入力されます.

  • フォーカスイベント
    |イベント|説明|
    |-|-|
    |フォーカス|エレメントがフォーカスを取得した場合|
    |blur|エレメントがフォーカスを失うと|

  • フォームイベント
    |イベント|説明|
    |-|-|
    |input|<input>,<textarea>要素値変更時|
    |submit|ユーザーがキーを使用してフォームをコミットする場合|
    |リセット|リセットボタンをクリック|
    |変更|選択ボックス、チェックボックス、ラジオボタンのステータス変更|
    |選択|テキストの選択|
    |フォームフィールドの内容をコピーする場合|
    |フォームフィールドの内容を貼り付ける場合|
    |フォームフィールドの内容を切り取る場合|

  • マウスイベント
    |イベント|説明|
    |-|-|
    |mouseup|マウスボタンを開くと|
    |mousedown|マウスを押したまま|
    |マウスを動かす|
    |mouseout|要素の外にマウスを移動した場合|
    |mouseenter|マウスポインタが入ると|
    |mouseleave|マウスポインタが離れたとき|
    |クリック|ユーザーが同じ要素でマウスボタンを押してアクティブにすると|
    |dbclick|ダブルクリック開始時|
    |contextmenu|ポップアップウィンドウの右クリックを制御|
    • BOJ 1520下り坂
    [Programmers][python] 19. クイズ練習(8):プログラマーの最大値を作成する