70 lines
4.6 KiB
XML
70 lines
4.6 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 890" role="img" aria-labelledby="title desc">
|
|
<title id="title">Прямая и делегированная привязка событий после замены HTML</title>
|
|
<desc id="desc">Сравнение двух подходов: прямой обработчик находится на кнопке и исчезает при замене содержимого контейнера, делегированный обработчик остаётся на постоянном контейнере и получает события от новой кнопки.</desc>
|
|
<defs>
|
|
<style>
|
|
.bg { fill: #fffdfa; }
|
|
.title { fill: #1e252d; font: 700 40px Arial, sans-serif; }
|
|
.sub { fill: #64707d; font: 25px Arial, sans-serif; }
|
|
.panel { fill: #ffffff; stroke-width: 3; }
|
|
.bad { stroke: #b4432a; }
|
|
.good { stroke: #216869; }
|
|
.panel-title { fill: #1e252d; font: 700 31px Arial, sans-serif; text-anchor: middle; }
|
|
.copy { fill: #44515d; font: 23px Arial, sans-serif; text-anchor: middle; }
|
|
.code { fill: #18385d; font: 700 17px "Courier New", monospace; text-anchor: middle; }
|
|
.root { fill: #eef3fa; stroke: #355c9a; stroke-width: 3; }
|
|
.old { fill: #fff4e8; stroke: #b4432a; stroke-width: 3; }
|
|
.new { fill: #e5f2ed; stroke: #216869; stroke-width: 3; }
|
|
.handler { fill: #f3f6f9; stroke: #64707d; stroke-width: 2; }
|
|
.cross { stroke: #b4432a; stroke-width: 7; stroke-linecap: round; }
|
|
.arrow { fill: none; stroke: #64707d; stroke-width: 5; marker-end: url(#arrow); }
|
|
.bubble { fill: none; stroke: #216869; stroke-width: 5; stroke-dasharray: 12 10; marker-end: url(#arrow-green); }
|
|
.note { fill: #65492e; font: 700 26px Arial, sans-serif; text-anchor: middle; }
|
|
</style>
|
|
<marker id="arrow" markerWidth="14" markerHeight="14" refX="11" refY="7" orient="auto">
|
|
<path d="M0,0 L14,7 L0,14 z" fill="#64707d"/>
|
|
</marker>
|
|
<marker id="arrow-green" markerWidth="14" markerHeight="14" refX="11" refY="7" orient="auto">
|
|
<path d="M0,0 L14,7 L0,14 z" fill="#216869"/>
|
|
</marker>
|
|
</defs>
|
|
|
|
<rect class="bg" width="1200" height="890"/>
|
|
<text class="title" x="65" y="82">После container.html(): что остаётся?</text>
|
|
<text class="sub" x="65" y="126">Событие переживает замену DOM только тогда, когда привязано к постоянному предку.</text>
|
|
|
|
<rect class="panel bad" x="60" y="190" width="510" height="570" rx="28"/>
|
|
<text class="panel-title" x="315" y="245">Прямая привязка к кнопке</text>
|
|
<text class="code" x="315" y="282">$('.js-remove')</text>
|
|
<text class="code" x="315" y="310">.on('click', handler)</text>
|
|
|
|
<rect class="root" x="125" y="335" width="380" height="170" rx="20"/>
|
|
<text class="copy" x="315" y="378">#cart получает новый HTML</text>
|
|
<rect class="old" x="210" y="414" width="210" height="60" rx="12"/>
|
|
<text class="copy" x="315" y="452">старая кнопка</text>
|
|
<rect class="handler" x="160" y="530" width="310" height="70" rx="15"/>
|
|
<text class="copy" x="315" y="563">обработчик жил</text>
|
|
<text class="copy" x="315" y="589">на дочернем узле</text>
|
|
<path class="arrow" d="M315 505 V526"/>
|
|
<path class="cross" d="M256 636 L374 704 M374 636 L256 704"/>
|
|
<text class="copy" x="315" y="735">Новая кнопка создана без него.</text>
|
|
|
|
<rect class="panel good" x="630" y="190" width="510" height="570" rx="28"/>
|
|
<text class="panel-title" x="885" y="245">Делегирование от #cart</text>
|
|
<text class="code" x="885" y="282">$('#cart').on('click.cart',</text>
|
|
<text class="code" x="885" y="310">'.js-remove', handler)</text>
|
|
|
|
<rect class="root" x="695" y="335" width="380" height="235" rx="20"/>
|
|
<text class="copy" x="885" y="378">#cart остаётся в DOM</text>
|
|
<rect class="handler" x="748" y="402" width="274" height="58" rx="14"/>
|
|
<text class="copy" x="885" y="439">обработчик на контейнере</text>
|
|
<rect class="new" x="780" y="487" width="210" height="60" rx="12"/>
|
|
<text class="copy" x="885" y="525">новая кнопка</text>
|
|
<path class="bubble" d="M885 487 V463"/>
|
|
<text class="copy" x="885" y="620">Клик всплывает до #cart.</text>
|
|
<text class="copy" x="885" y="655">Перепривязывать кнопку не нужно.</text>
|
|
|
|
<rect x="160" y="800" width="880" height="54" rx="16" fill="#f3f6f9" stroke="#64707d" stroke-width="2"/>
|
|
<text class="note" x="600" y="836">Корень — ближайший постоянный контейнер.</text>
|
|
</svg>
|