[JS] #EventHandler

1756 ワード
JavaScript テキストリンク
DOMからオブジェクトを取得
  • 要素がない場合null
    • を返します.
  • 等のアイデンティティを有する複数の要素についてgetElementsByID
    • を用いる.
  • であれば、タイル形式の
    • に戻る
  • ClassName、TagNameなど.
    const header = document.getElementByID("h2");
    +)document.QuerySelector("");度利用可能
    関数の定義
    一般関数の定義
    function handler() {
	console.log("hello");
}
    Es 6構文の矢印機能
    function handler () => {
    console.log("hello");
}
    SuperHandler使用時
    handler: function () {
    console.log("hello");
  }
    DOMオブジェクトと関数を使用したEventHandler
    const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c"];

const header = document.querySelector("h2");

const superEventHandler = {
  handleMouseOver: function () {
    header.innerHTML = "The mouse is here!";
    header.style.color = colors[0];
  },
  handleMouseOut: function () {
    header.innerHTML = "The mouse is gone!";
    header.style.color = colors[1];
  },
  handleResize: function () {
    header.innerHTML = "You just resized!";
    header.style.color = colors[2];
  },
  handleRightClick: function () {
    header.innerHTML = "That was a right click!";
    header.style.color = colors[3];
  }
};

header.addEventListener("mouseover", superEventHandler.handleMouseOver);
header.addEventListener("mouseout", superEventHandler.handleMouseOut);
window.addEventListener("resize", superEventHandler.handleResize);
window.addEventListener("contextmenu", superEventHandler.handleRightClick);
    • mysql単一フィールド任意の文字マッチングブラークエリ
    ログファイルをクリアする方法