[JS] 2. Event Handling

2718 ワード
Event JavaScript toggle テキストリンク

Document Object

  • JSはHTMLで開くことができますが、HTMLでロードして符号化してインタラクションを作成することができます.そのため、機能は強力です.
  • JSからHTMLをロードする場合は、文書
    • を使用します.
  • は、以下の方法でHTMLにオブジェクトをロードすることができる:
    • 1. document.getElementById();
2. document.getElementsByClassName();
3. document.querySelector();
  • objectをロードすると、さまざまな操作を実行できますが、JSの大きな利点は、Webサイトで発生するさまざまなイベントを処理できることです.

    Event Listener

  • Webサイトで発生したイベントは、クリック、マウスのアクセス、マウスの離れ、コピー、貼り付け、ウィンドウサイズなどです.
  • これらのイベントを処理するには、まず、
    • という形式でイベントリスナーを追加する必要がある.
    const a = document.getElementById();
a.addEventListener("event", "function")
  • この時点で、イベントは前述した様々なイベントに目的の内容を記入することができ、関数は関数を作成し、イベントが発生したときにどのような反応を示すことができます.
    たとえば、clickイベントが発生した場合、文字の色を変更する関数を適用すると、
  • というコードを記述できます.
    const a = document.getElementById();
function changeColor(){
   a.style.color = "blue";
}
a.addEventListener("click", changeColor);

    CSSとClassで変更

  • 前述の例の関数によってフォントの色などのスタイルを変更することは、JSでCSS処理コードを使用するよりも簡潔である、
    • .
  • CSSでスタイルに関するコードを記述した場合、JSはクラスをうまくロードする必要があります:
  • JSでclassを変更するには、classNameを更新するか、classList
    • を更新できます.
    更新
  • classNameの例は次のとおりです:
    • #style.css
.active {
   color : blue;
}

#app.js
const a = document.getElementById();
function changeClassName(){
   a.className = "active";
}
a.addEventListener("click", changeClassName);
  • classNameを更新する場合、既存のclassNameは無視され、直接更新されるため、
    • はあまり使いにくい
  • クラスのリストを更新する例は、
    • です.
    #style.css
.active {
   color : blue;
}

#app.js
const a = document.getElementById();
function changeClassName(){
   a.classList.add("active");
}
a.addEventListener("click", changeClassName);
    クラスリストはadd、remove、containsなど多くの関数を使用することができるため、通常はとしてよく使用される.

    更新とToggle

  • と同様の例では、1回目のクリック時の状態を変更し、再度クリック時の状態を1回目のクリック時の状態に戻すには、
    • をクリックします.
  • の場合、
    • というコードを記述できます.
    const a = document.getElementById();

function changeColor(){
    const changedState = "active";
    if(a.classList.contains(changedState)){
        a.classList.remove(changedState);
    } else{
        a.classList.add(changedState);
    }
}
a.addEventListener("click", changeColor)
  • しかし、これらのコードは非常に一般的な論理であり、すでに独自に実現されている関数は
    • に存在する.
  • は、上記の機能を実現するために以下のコードを使用することができる:
    • .
    const a = document.getElementById();

function changeColor(){
    a.classList.toggle('active')
}
a.addEventListener("click", changeColor)
    結論:切り替えは神です.
    [javascript]2変数、データ型＃ヘンスウデータタイプ＃
    ブラウザの非同期メカニズムの初歩的な概要