event delegation(step 19)
1.基本的な完全なコードを確認し、理解しようとする
<html><head></head><body>
<link type="text/css" rel="stylesheet" href="https://ko.js.cx/article/event-delegation/bagua/bagua.css">
<table id="bagua-table">
<tbody><tr>
<th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
</tr>
<tr>
<td class="nw"><strong>Northwest</strong>
<br>Metal
<br>Silver
<br>Elders
</td>
<td class="n"><strong>North</strong>
<br>Water
<br>Blue
<br>Change
</td>
<td class="ne"><strong>Northeast</strong>
<br>Earth
<br>Yellow
<br>Direction
</td>
</tr>
<tr>
<td class="w"><strong>West</strong>
<br>Metal
<br>Gold
<br>Youth
</td>
<td class="c"><strong>Center</strong>
<br>All
<br>Purple
<br>Harmony
</td>
<td class="e"><strong>East</strong>
<br>Wood
<br>Blue
<br>Future
</td>
</tr>
<tr>
<td class="sw"><strong>Southwest</strong>
<br>Earth
<br>Brown
<br>Tranquility
</td>
<td class="s"><strong>South</strong>
<br>Fire
<br>Orange
<br>Fame
</td>
<td class="se"><strong>Southeast</strong>
<br>Wood
<br>Green
<br>Romance
</td>
</tr>
</tbody></table>
<script>
let table = document.getElementById('bagua-table');
let selectedTd;
table.onclick = function(event) {
let target = event.target;
while (target != this) {
if (target.tagName == 'TD') {
highlight(target);
return;
}
target = target.parentNode;
}
}
function highlight(node) {
if (selectedTd) {
selectedTd.classList.remove('highlight');
}
selectedTd = node;
selectedTd.classList.add('highlight');
}
</script>
</body></html>
1)テーブル内でNorthNorthNorthEastと同じテーブル上部の内容をクリックした場合に発生します。
event.ターゲットは
<strong>Northwest</strong><table id="bagua-table">...</table><td class ...> ... </td>if文がtrueであるため、while文を再実行します.
highlight関数を実行し、既存のselectedtdがある場合は、classからhighlightを削除し、新しいノードをselectedtdに挿入します.
対応するclassにhighlightを追加し、ハイライト表示します.
2)1回以外の表の内容をクリックすると、
event.ターゲットは
<td class ...> ... </td><table id="bagua-table">...</table>highlight関数を実行して返します.
While文の使用理由
event.targetの場合、対応する子ラベル(exStrongtag)が選択される場合があります.必要な親ラベルを特定して変更するにはeventを実行します.ターゲットを基準に親ラベルを繰り返し検索し、見つかった親ラベルを変換する必要があるからです.
実行結果
左上の表をクリックすると、下のように赤と前のように強調表示されます.
2. data-action
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
</head>
<body>
<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-index-col='1bcd'
data-parent="cars">
</article>
<script>
var article = document.getElementById('electriccars');
console.log(article.dataset.columns) // "3"
console.log(article.dataset.indexNumber) // "12314"
console.log(article.dataset.parent) // "cars"
console.log(article.dataset.indexCol) // "1bcd"
</script>
</body>
</html>3.Bindは?
<script>
function say(something){console.log( "hi "+this.name+"."+something);};
var person = {name:"kim"};
say.bind(person);
say('how are you');
</script>bindの主な目的は、関数とオブジェクトをバンドルすることです。
sayという名前の関数でpersonという名前のオブジェクトをグループ化し、consoleにコンテンツを送信します.日誌を作る.
もっと複雑にすれば
<script>
function say(something){console.log( "hi "+this.name+"."+something);};
var person = {name:"kim"};
var g = say.bind(person);
g('how are you');
</script>4.活動委任の利用
<html><head></head><body>
<link type="text/css" rel="stylesheet" href="https://ko.js.cx/article/event-delegation/bagua/bagua.css">
<div id="menu">
<button data-action="save">저장하기</button>
<button data-action="load">불러오기</button>
<button data-action="search">검색하기</button>
</div>
<script>
class Menu {
constructor(elem) {
elem.onclick = this.onClick.bind(this); // (*)
}
save() {
alert('저장하기');
}
load() {
alert('불러오기');
}
search() {
alert('검색하기');
}
onClick(event) {
let action = event.target.dataset.action;
console.log(action);
console.log(event.target);
console.log(this[action]);
if (action) {
this[action]();
}
};
}
new Menu(menu);
</script>
</body></html>実際、elemの内容は
`<div id="menu">
<button data-action="save">저장하기</button>
<button data-action="load">불러오기</button>
<button data-action="search">검색하기</button>
</div>そして、現在MenuのthisはMenuそのものを表しています.
つまりElemonclick = this.onClick.bind(this); コンテンツをクリックすると、MenuにバインドされたonClick関数が実行されます.(この場合、onClickではなくthis.onClickを使用するのは、thisがonClick関数の上にあるため、thisを追加して見つけます.)
クリックすると、onClick関数を実行して得られる操作がデータセットの内容であるため、if文でこの「操作」は関数を表します.
this[action]()この[action]がsave関数自体である場合
this[action]()●関連コンテンツのメリット
1.ボタンごとにプロセッサを割り当てるコードを記述する必要はありません.メソッドを作成してHTMLに書き込むだけです.
2.随時ボタンの追加と削除を行い、HTML構造をより柔軟にする
5.整理
委任イベントにより,必要な部分を再達成し,使用方法をさらに議論する必要があるため,bindやthisなどの内容を処理し,data−setという新しい概念を理解する必要がある.
Reference
この問題について(event delegation(step 19)), 我々は、より多くの情報をここで見つけました https://velog.io/@khw970421/event-delegationstep-19テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol