Event

How to use Events

Prefer:後でremoveEventListenerでイベントリスナーを削除できます!
🔑 `elementName.addEventListener()`使用後スキップ→ex)`titleをクリックします.addEventsListener("click", handlteTitleClick);`
🔑 `title.onlick = handleTitleClick;`
console.dir("something"); コンソールウィンドウでon---で始まるのは通常Eventです.
h 1オブジェクトの内部のオブジェクトを表示できます.JavaScript形式で作成された要素のスタイルです.

addEventListener:イベントのリスニング

const title = document.querySelector(".hello h1");

function handleTitleclick(){
  console.log("title was click");
    title.style.color = "blue"
};

// title.addEventListener("이벤트의 종류 listen", 동작하는function);
title.addEventListener("click", handleTitleclick);

HandleTitleClick以降は使用できません.
(=javascriptにのみ関数を渡し、ユーザーがクリックした場合、javscriptは実行ボタンの代わりにユーザーがクリックすることを望んでいるため、/関数()はこの2つのカッコを追加して実行ボタンを押すことができます)
聞き取りたいイベントの検索方法

Googleで検索した要素名(ex.h 1 elment)+MDNで検索

リンクで「Web API」文を含むページを検索(このプロセスは確かに退屈)

したがって、エディタでconsole.dir(element)を作成し、コンソールに出力します.

コンソールから大量のプロパティが出力されます(ここでは使用可能なイベントが見つかります!)

propertyの前にonがあれば、イベントリスナー!!

eventはonabrotではなくabortを使用することを要求しています.(関于‐)|𐥎8|

単純なイベントタイプ

onmouseentertitle上にマウスを置いたときにマウスをクリックするのではなく、上に直接ぶら下がったときのイベント

onmouseleaveマウスが位置を離れたとき~

More Events

Windows Event Listen(デフォルト)**

devicemotion:移動または動作時にトリガーされるイベント

reseize:h1サイズ変更不可windowサイズ変更可

function handleWindowResize() {
  document.body.style.backgroundColor = "tomato";
}
/* h1처럼 document밑으로 가져올 수 없엉 / h1랑 document는 다르다*/

💫 `document`の`body,head,title`これらはすべて重要なため存在して、残りの要素はすべて`querySelector`あるいは`getElementsById`などで探します!

// HTML in JavaScript

const h1 = document.querySelector("div.hello:first-child h1");
// querySelector는 첫번째 element를 가져옴
// h1.innerText = "hello"; // javascript object 속 property를 변경

console.dir(h1);

function handleTitleclick() {
  console.log("Title was click");
  h1.style.color = "blue";
}

function handleMouseEnter() {
  h1.innerText = "Mouse is here!!🐭"
}

function handleMouseLeave() {
  h1.innerText = "Mouse is gone!"
}

function handleWindowResize() {
  document.body.style.backgroundColor = "tomato";
}

function handleWindowCopy() {
  alert("copier!");
}

function handleWindowOffline() {
  alert("SOS no Wi-Fi");
}

function handleWindowOnline() {
  alert("ALll GOodd")
}

h1.addEventListener("click", handleTitleclick);
h1.addEventListener("mouseenter", handleMouseEnter);
h1.addEventListener("mouseleave", handleMouseLeave);

window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy",handleWindowCopy);
window.addEventListener("offline", handleWindowOffline);
window.addEventListener("online", handleWindowOnline);