event listening
2369 ワード
.jsファイルがあるので、jsでhtmlコンテンツをインポートできます.
jsでのほとんどの作業:ユーザーのイベントに耳を傾ける
すべてのイベントをjsで傍受(検出)できます.
イベント:動作
jsオブジェクト属性名の前にonを付けたのはevent
const title = document.querySelector(".hello h1");
function handleTitleClick() {
console.log("title was clicked")
}
title.addEventListener("click", handleTitleClick) // 누군가가 title을 click하는 것을 listen할 거임 → 무언가를 해줘야함最も重要なのは、addEventListenerの関数が直接実行されないことです.ブラウザは、実行するだけでなく、イベントに関する情報も提供できます.
title.onclick = titleClick; 銀.
title.addEventListener(「click」,handleTitleClick)と同じ
.addEventListenerが選択された理由は、.removeEventListenerによってイベントリスナーを削除できるからである.聞き取りたいイベントを検索
コンソール要素.dir()に出力すると、属性名の前にonを付けたものを検索します.イベントを使用する時間を切断します.
あるいは、h 1 html element mdnなど、グーグルで検索したい要素名を検索します.参照リンク
Web APIsの記事を含むページ.これはJS観点のHTML Heading Elementを意味するからです.https://developer.mozilla.org/en-US/docs/Web/APIを参照documentではbody,head,titleが重要で、いつでも
ex) document.body,documentとしてインポートできます.body.style~のコマンドは許可されていますがdivなどのコマンドは呼び出せません
divやh 1などの要素はquerySelector getElementByIdなどで検索する必要があります.
ex) document.querySelector(“h1”);
ウィンドウは内蔵
function handleWindowResize(){
document.body.style.backgroundColor = “tomato”;
}
function handleWindowCopy(){
alert(“copier”);
}
window.addEventListener(“resize”, handleWindowResize);
window.addEventListener(“copy”, handleWindowCopy);const h1 = document.querySelector(".hello h1"); //step1
function handleTitleClick() { //step3
const currentColor = h1.style.color;
let newColor;
if (currentColor === "blue") {
newColor = "tomato";
} else {
newColor = "blue";
}
h1.style.color = newColor;
}
h1.addEventListener("click", handleTitleClick); //step2step1. 要素が見つかりました.
step2. イベントを聴く.
step3. その事件に反応する.(関数)
Reference
この問題について(event listening), 我々は、より多くの情報をここで見つけました https://velog.io/@fizzy/eventテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol