Javascript CustomEvent

📌 Event

CustomEveneの前にイベントを理解してください.

イベント:ドキュメント・オブジェクト・モデルでマウスをクリックしたり、キーボードを押したりするなど、ユーザーのアクションによって引き起こされるか、APIによって非同期操作される可能性があります.

これらのイベントによって、各DOMは、イベントを受信および処理する動作を実行することができ、典型的には、addEventListener()方法を使用してイベントを非同期処理し、removeEventListener()に削除する.

📌 addEventListener

addEventListener('event type', callback function)

target.addEventListener()メソッドは、指定したイベントがターゲット(ターゲット)に渡されるたびに非同期に呼び出される関数(コールバック)を設定します.Element、Document、Window、XMLfttpRequestなど、すべてのオブジェクトに割り当てることができます.

共通イベントタイプ

変化:変動がある場合

クリック:クリック時

フォーカス:フォーカスを取得する場合は

キー:キーボードを押すとき

キー:キーボードから手を動かすとき

mouseout:マウスが特定のオブジェクトから離れると

mouseover:特定のオブジェクトにマウスを置くと

mousemove:マウスが移動すると

mouseup:

select:オプションラベル等を選択する場合、

それ以外にも活動が多く、HTML DOM Eventsではより多くのEventTypeを見ることができます.

📌 CustomEvent

CustomEventとは?

const target = new CustomEvent(typeArg, customEventInit)

CustomEventは、必要なイベント名(typeArg)を使用してCustomEventを作成します.CustomEventInitはオプションで、オブジェクトに詳細なオプション値があります.
detailは{ "detail": 옵션 }で、デフォルトはnullです.すべてのタイプが使用可能で、イベントに関連するイベント依存値です.

CustomEventの使用

eventTargetはCustomEventとして作成されたオブジェクトです.dispatchEvent()メソッドとともに使用します.

const windowObject = window;

// 적당한 이벤트 리스터 추가
windowObject.addEventListener("Junhyeong", (e) => (e.detail));

// 이벤트 생성 및 실행
const event = new CustomEvent("Junhyeong", {
  detail: {
    male: true
  }
});

windowObject.dispatchEvent(event); // true

この方法では、関数を宣言することで現在のurlを受信し、urlを詳細値に渡し、historyを使用することができます.受信したurlは、pushStateなどの履歴APIを使用してセッション履歴に適用することができる.

📌 学識

addEventListenerは何度も見たことがありますが、試してみました.それがどのように働いているのか、よく使われるEventタイプの程度を知っています.次に、CustomEventでカスタムEventTypeを作成して使用することで、オブジェクトから無限のアクティビティを開始できると思います.
実際、多くの既定のアクティビティがあっても、数は固定されており、開発者が予想していたアクティビティがない可能性があると思います.しかし,CustomEventなどの手法を用いてWebブラウザの動的機能をより多く実行できることが分かった.

📌 あとで

addEventListenerの方法を初めて知ったとき『おお!種類別に知っていれば役に立つと思いました」暗記しておらず、よく使う程度しかわからないのですが、使うたびにMDNサイトを使う必要はありませんし、実際に勉強する必要があるのは応用発想と使いたい活動です.
今は難しいと感じていますが、CustomEventを使うと簡単な感じがして、MDNなどを探さなくても(もちろん、Eventがあればそのまま使う)、もっと多くの機能を実行できるWebを作ることができると信じています.

--デブコスの課題--

Defcos 4~5週間の課題でタスククローンプロジェクトを行い,結果は以下の通りであった.

課題の要望通りに実現しましたが、残念です.

の実際の操作では、Documentをクリックすると、現在のページのDocumentが背景色として表示され、フォントの色が濃くなり、簡単に実現できますが、リフレッシュ時に保持するのは難しいです.

ローカルおよびセッションストレージを使用して、サブドキュメントの表示と非表示の切り替え値をtrue、falseに維持し、リフレッシュ時に変わらないようにしたいのですが、APIとストレージを同時に使用する必要があり、2回のレンダリングを経て、これは不要だと思います.

サブドキュメントがない場合、▶ボタンを押すと、実際の操作では하위 페이지가 없습니다と表示され、新しいul、liタグを使ってレンダリングする場合、それを呼んでもいいと思いますが、思ったより難しいです.

実際、授業で学んだことに基づいて、コードを再構築し、完成した様子を見て、喜んだが、いくつかの残念な思いを残した.次は自分の力でプロジェクトをこなす実力になるように頑張ります.

📌 リファレンスサイト

https://developer.mozilla.org/ko/docs/Web/API/CustomEvent/CustomEvent