jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

renovations, new pics from @bezart

Browse source
This commit is contained in:
Ilya Kantor 2015-02-22 12:44:37 +03:00
parent b1cf35268b
commit 801ff5f119
145 changed files with 711 additions and 300 deletions
Download patch file Download diff file Expand all files Collapse all files

14
2-ui/1-document/16-metrics-window/document-client-width-height.svg
View file

@ -6,7 +6,7 @@
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="document-client-width-height.svg" sketch:type="MSArtboardGroup">
<g id="noun_69008_cc" sketch:type="MSLayerGroup" transform="translate(236.000000, 8.000000)" fill="#E8C48E">
<g id="noun_69008_cc" sketch:type="MSLayerGroup" transform="translate(276.000000, 8.000000)" fill="#E8C48E">
<path d="M179.1875,145 L3.8125,145 C1.708,145 0,143.36875 0,141.375 L0,3.625 C0,1.63125 1.708,0 3.8125,0 L179.1875,0 C181.284375,0 183,1.63125 183,3.625 L183,141.375 C183,143.36875 181.284375,145 179.1875,145 L179.1875,145 Z M7.625,137.75 L175.375,137.75 L175.375,7.25 L7.625,7.25 L7.625,137.75 L7.625,137.75 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M175.375,36.25 L7.625,36.25 C5.5205,36.25 3.8125,34.61875 3.8125,32.625 C3.8125,30.63125 5.5205,29 7.625,29 L175.375,29 C177.471875,29 179.1875,30.63125 179.1875,32.625 C179.1875,34.61875 177.471875,36.25 175.375,36.25 L175.375,36.25 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M61.32025,126.57775 C60.0545,126.57775 58.811625,125.98325 58.08725,124.89575 L34.892,89.84925 C34.060875,88.57325 34.121875,86.97825 35.052125,85.7675 L58.247375,55.86125 C59.497875,54.23 61.876875,53.8965 63.57725,55.1145 C65.27,56.3035 65.636,58.57275 64.377875,60.18225 L42.7305,88.102 L64.538,121.05325 C65.658875,122.7425 65.125125,124.99 63.340875,126.04125 C62.72325,126.411 62.014125,126.57775 61.32025,126.57775 L61.32025,126.57775 Z" id="Shape" sketch:type="MSShapeGroup"></path>
@ -16,14 +16,18 @@
<path d="M38.125,18.125 C38.125,20.1278125 36.4189062,21.75 34.3125,21.75 C32.2060938,21.75 30.5,20.1278125 30.5,18.125 C30.5,16.1221875 32.2060938,14.5 34.3125,14.5 C36.4189062,14.5 38.125,16.1221875 38.125,18.125 L38.125,18.125 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M53.375,18.125 C53.375,20.1278125 51.6689062,21.75 49.5625,21.75 C47.4560938,21.75 45.75,20.1278125 45.75,18.125 C45.75,16.1221875 47.4560938,14.5 49.5625,14.5 C51.6689062,14.5 53.375,16.1221875 53.375,18.125 L53.375,18.125 Z" id="Shape" sketch:type="MSShapeGroup"></path>
</g>
<path d="M274.078672,96.0852289 L254.783869,88.4952289 C254.041565,88.2042289 253.073012,88.0582289 252.099374,88.0582289 C251.128279,88.0582289 250.154641,88.2042289 249.41488,88.4952289 C247.932815,89.0792289 247.932815,90.0242289 249.41488,90.6072289 L263.343236,96.0852289 L218.459304,96.0852289 C218.451678,96.0852289 218.444051,96.0862289 218.433883,96.0862289 L185.561537,96.0862289 L199.489894,90.6082289 C200.971959,90.0242289 200.971959,89.0792289 199.489894,88.4962289 C198.005287,87.9132289 195.60297,87.9132289 194.120905,88.4962289 L171.030695,97.5792289 L174.826102,99.0732289 L194.120905,106.663229 C194.863209,106.954229 195.831762,107.101229 196.8054,107.101229 C197.776495,107.101229 198.750133,106.954229 199.489894,106.663229 C200.971959,106.079229 200.971959,105.134229 199.489894,104.551229 L185.561537,99.0732289 L230.44547,99.0732289 C230.453096,99.0732289 230.460723,99.0722289 230.470891,99.0722289 L263.343236,99.0722289 L249.41488,104.550229 C247.932815,105.134229 247.932815,106.079229 249.41488,106.662229 C250.899486,107.245229 253.301804,107.245229 254.783869,106.662229 L277.874079,97.5792289 L274.078672,96.0852289" id="Fill-25" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(224.452387, 97.579729) rotate(-91.000000) translate(-224.452387, -97.579729) "></path>
<path d="M408.414472,164.793761 L375.121164,157.203761 C373.840315,156.912761 372.16907,156.766761 370.489052,156.766761 C368.81342,156.766761 367.133402,156.912761 365.856939,157.203761 C363.299627,157.787761 363.299627,158.732761 365.856939,159.315761 L389.890409,164.793761 L312.442893,164.793761 C312.429734,164.793761 312.416574,164.794761 312.399028,164.794761 L255.677584,164.794761 L279.711053,159.316761 C282.268365,158.732761 282.268365,157.787761 279.711053,157.204761 C277.149355,156.621761 273.00414,156.621761 270.446828,157.204761 L230.604521,166.287761 L237.15352,167.781761 L270.446828,175.371761 C271.727678,175.662761 273.398923,175.809761 275.078941,175.809761 C276.754572,175.809761 278.43459,175.662761 279.711053,175.371761 C282.268365,174.787761 282.268365,173.842761 279.711053,173.259761 L255.677584,167.781761 L333.125099,167.781761 C333.138259,167.781761 333.151418,167.780761 333.168964,167.780761 L389.890409,167.780761 L365.856939,173.258761 C363.299627,173.842761 363.299627,174.787761 365.856939,175.370761 C368.418638,175.953761 372.563852,175.953761 375.121164,175.370761 L414.963472,166.287761 L408.414472,164.793761" id="Fill-26" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(322.783996, 166.288261) rotate(-179.000000) translate(-322.783996, -166.288261) "></path>
<text id="documentElement.clie" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="4" y="99">documentElement.clientHeight</tspan>
<tspan x="19" y="89">documentElement.clientHeight</tspan>
</text>
<text id="document.documentEle" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="253" y="198">document.documentElement.clientWidth</tspan>
<tspan x="229" y="197">document.documentElement.clientWidth</tspan>
</text>
<path d="M457.012291,168.153273 L277.502296,168.153273" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-3-decoration-1" d="M278.012291,168.153273 C281.792291,169.203273 285.032291,170.103273 288.812291,171.153273 C288.812291,169.053273 288.812291,167.253273 288.812291,165.153273 C285.032291,166.203273 281.792291,167.103273 278.012291,168.153273 C278.012291,168.153273 278.012291,168.153273 278.012291,168.153273 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path id="Line-3-decoration-2" d="M456.212291,168.153273 C452.432291,169.203273 449.192291,170.103273 445.412291,171.153273 C445.412291,169.053273 445.412291,167.253273 445.412291,165.153273 C449.192291,166.203273 452.432291,167.103273 456.212291,168.153273 C456.212291,168.153273 456.212291,168.153273 456.212291,168.153273 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M257.5,151.012291 L257.5,14.5022964" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M257.5,15.012291 C256.45,18.792291 255.55,22.032291 254.5,25.812291 C256.6,25.812291 258.4,25.812291 260.5,25.812291 C259.45,22.032291 258.55,18.792291 257.5,15.012291 C257.5,15.012291 257.5,15.012291 257.5,15.012291 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path id="Line-decoration-2" d="M257.5,150.212291 C256.45,146.432291 255.55,143.192291 254.5,139.412291 C256.6,139.412291 258.4,139.412291 260.5,139.412291 C259.45,143.192291 258.55,146.432291 257.5,150.212291 C257.5,150.212291 257.5,150.212291 257.5,150.212291 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.8 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB

Before After
Before After

4
2-ui/2-events-and-interfaces/4-event-bubbling/article.md
View file

@ -36,7 +36,7 @@
Всплытие гарантирует, что клик по внутреннему `<p>` вызовет обработчик `onclick` (если есть) сначала на самом `<p>`, затем на элементе `<div>` далее на элементе `<form>`, и так далее вверх по цепочке родителей до самого `document`.
<img src="event-order-bubbling.png" alt="Порядок всплытия событий">
<img src="event-order-bubbling.svg" alt="Порядок всплытия событий">
Поэтому если в примере выше кликнуть на `P`, то последовательно выведутся `alert`: `p` -> `div` -> `form`.
@ -129,7 +129,7 @@
В [стандарте DOM Events 3](http://www.w3.org/TR/DOM-Level-3-Events/) это продемонстрировано так:
<img src="eventflow.png">
<img src="eventflow.svg">
То есть, при клике на `TD` событие путешествует по цепочке родителей сначала вниз к элементу ("погружается"), а потом наверх ("всплывает"), по пути задействуя обработчики.

BIN
2-ui/2-events-and-interfaces/4-event-bubbling/event-order-bubbling.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 4.6 KiB

29
2-ui/2-events-and-interfaces/4-event-bubbling/event-order-bubbling.svg Normal file
View file

@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="337px" height="216px" viewBox="0 0 337 216" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>event-order-bubbling.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="event-order-bubbling.svg" sketch:type="MSArtboardGroup">
<path d="M159.48764,140 L174,186 L60,186 L74.51236,140 L159.48764,140 Z" id="Rectangle-210" fill="#FFDE99" sketch:type="MSShapeGroup"></path>
<path d="M180.23146,72 L202,141 L31,141 L52.76854,72 L180.23146,72 Z" id="Rectangle-209" stroke="#CFCE95" stroke-width="18" sketch:type="MSShapeGroup"></path>
<path d="M199.611787,20 L228,110 L5,110 L33.388213,20 L199.611787,20 Z" id="Rectangle-208" stroke="#99C0C3" stroke-width="18" sketch:type="MSShapeGroup"></path>
<path d="M112.500875,123 L112.500875,110 L112.500875,110 L121.499875,110 L121.499875,123 L112.500875,123 Z M112.500875,141 L112.500875,154.816139 C112.500875,157.302139 114.514875,159.316139 117.000875,159.316139 C119.484875,159.316139 121.499875,157.302139 121.499875,154.816139 L121.499875,141 L112.500875,141 Z M112.500875,92 L112.500875,35.6981394 L102.361875,45.8351394 C100.605875,47.5921394 97.756875,47.5921394 95.998875,45.8351394 C94.240875,44.0771394 94.240875,41.2281394 95.998875,39.4711394 L113.637875,21.8311394 C114.563875,20.9071394 115.789875,20.4821394 117.000875,20.5311394 C118.210875,20.4821394 119.437875,20.9071394 120.361875,21.8311394 L138.001875,39.4711394 C139.758875,41.2281394 139.758875,44.0771394 138.001875,45.8351394 C136.243875,47.5921394 133.394875,47.5921394 131.637875,45.8351394 L121.499875,35.6981394 L121.499875,92 L112.500875,92 Z" id="Fill-46" fill="#5A4739" sketch:type="MSShapeGroup"></path>
<text id="1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#5A4739">
<tspan x="210" y="105">1</tspan>
</text>
<text id="2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#5A4739">
<tspan x="185" y="136">2</tspan>
</text>
<text id="3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="157" y="181">3</tspan>
</text>
<text id="Самый-глубокий-элеме" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" line-spacing="17" fill="#8A704D">
<tspan x="211" y="181">Самый глубокий </tspan>
<tspan x="211" y="198">элемент</tspan>
</text>
<path d="M170.5,176.5 L200.5,176.5" id="Line-30" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
2-ui/2-events-and-interfaces/4-event-bubbling/eventflow.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 21 KiB

194
2-ui/2-events-and-interfaces/4-event-bubbling/eventflow.svg Normal file
View file

@ -0,0 +1,194 @@
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 640 690">
<title>DOM Level 3 Events: Event Flow</title>
<desc>Alternate description</desc>
<defs id="defs-1">
<path id="arrowhead" d="M-9,-4 L0,0 -9,4 Z" stroke-linejoin="round" stroke-linecap="round"/>
<marker id="blackArrow" viewBox="-13 -5 14 10" refX="-4" markerWidth="10" markerHeight="20" orient="auto">
<use xlink:href="#arrowhead" stroke="black" fill="black" />
</marker>
<marker id="redArrow" viewBox="-13 -5 14 10" refX="-4" markerWidth="10" markerHeight="20" orient="auto">
<use xlink:href="#arrowhead" stroke="red" fill="red" />
</marker>
<marker id="greenArrow" viewBox="-13 -5 14 10" refX="-4" markerWidth="10" markerHeight="20" orient="auto">
<use xlink:href="#arrowhead" stroke="green" fill="green" />
</marker>
<filter x="-5%" y="-5%" width="120%" height="120%" id="dropShadow">
<feGaussianBlur stdDeviation="2 2" in="SourceAlpha"/>
<feOffset dx="4" dy="4"/>
<feComponentTransfer result="shadow">
<feFuncA type="linear" slope=".55" intercept="0"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<g id="nodes" font-family="Verdana, sans-serif" font-size="18" fill="black" text-anchor="middle" stroke="none" stroke-width="2">
<g id="Window-node" transform="translate(310, 10)">
<a xlink:href="../DOM3-Events.html#glossary-window" target="_parent">
<rect x="-70" y="0" width="140" height="40" fill="gainsboro" stroke="black" filter="url(#dropShadow)" />
<text x="0" y="26">Window</text>
</a>
</g>
<g id="document-node" transform="translate(310, 80)">
<a xlink:href="../DOM3-Events.html#glossary-document" target="_parent">
<rect x="-60" y="0" width="120" height="40" fill="gainsboro" stroke="black" filter="url(#dropShadow)" />
<text x="0" y="26">Document</text>
</a>
</g>
<g id="html-node" transform="translate(310, 150)">
<rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
<text x="0" y="26">&lt;html&gt;</text>
</g>
<g id="body-node" transform="translate(310, 220)">
<rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
<text x="0" y="26">&lt;body&gt;</text>
</g>
<g id="table-node" transform="translate(310, 290)">
<rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
<text x="0" y="26">&lt;table&gt;</text>
</g>
<g id="tbody-node" transform="translate(310, 360)">
<rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
<text x="0" y="26">&lt;tbody&gt;</text>
</g>
<g id="tr_1-node" transform="translate(140, 450)">
<rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
<text x="0" y="26">&lt;tr&gt;</text>
</g>
<g id="tr_2-node" transform="translate(500, 450)">
<rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
<text x="0" y="26">&lt;tr&gt;</text>
</g>
<g id="tr_1_td_1-node" transform="translate(70, 540)">
<rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
<text x="0" y="26">&lt;td&gt;</text>
</g>
<g id="tr_1_td_1_text-node" transform="translate(70, 610)">
<ellipse cx="0" cy="35" rx="64" ry="35" fill="steelblue" stroke="black" filter="url(#dropShadow)"/>
<text x="0" y="40" font-size="15" fill="white" text-anchor="middle">Shady Grove</text>
</g>
<g id="tr_1_td_2-node" transform="translate(210, 540)">
<rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
<text x="0" y="26">&lt;td&gt;</text>
</g>
<g id="tr_1_td_2_text-node" transform="translate(210, 610)">
<ellipse cx="0" cy="35" rx="64" ry="35" fill="steelblue" stroke="black" filter="url(#dropShadow)"/>
<text x="0" y="40" font-size="15" fill="white" text-anchor="middle">Aeolian</text>
</g>
<g id="tr_2_td_1-node" transform="translate(430, 540)">
<rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="blue" stroke="black" filter="url(#dropShadow)" />
<text x="0" y="26" fill="white">&lt;td&gt;</text>
</g>
<g id="tr_2_td_1_text-node" transform="translate(430, 610)">
<ellipse cx="0" cy="35" rx="64" ry="35" fill="steelblue" stroke="black" filter="url(#dropShadow)"/>
<text x="0" y="40" font-size="15" fill="white" text-anchor="middle">
<tspan x="0" y="34">Over the River,</tspan> <tspan x="0" y="54">Charlie</tspan>
</text>
</g>
<g id="tr_2_td_2-node" transform="translate(570, 540)">
<rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
<text x="0" y="26">&lt;td&gt;</text>
</g>
<g id="tr_2_td_2_text-node" transform="translate(570, 610)">
<ellipse cx="0" cy="35" rx="64" ry="35" fill="steelblue" stroke="black" filter="url(#dropShadow)"/>
<text x="0" y="40" font-size="15" fill="white" text-anchor="middle">Dorian</text>
</g>
</g>
<g id="edges">
<line id="window-document" x1="310" y1="50" x2="310" y2="73" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
<line id="document-html" x1="310" y1="120" x2="310" y2="143" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
<line id="html-body" x1="310" y1="190" x2="310" y2="213" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
<line id="body-table" x1="310" y1="260" x2="310" y2="283" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
<line id="table-tbody" x1="310" y1="330" x2="310" y2="353" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
<path id="tbody-tr_1" fill="none" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"
d="M310,400 Q310,420 260,420 H160 Q140,420 140,443"/>
<path id="tbody-tr_2" fill="none" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"
d="M310,400 Q310,420 380,420 H480 Q500,420 500,443"/>
<path id="tr_1-tr_2_td_1" fill="none" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"
d="M140,490 Q140,510 120,510 H90 Q70,510 70,533"/>
<path id="tr_1-tr_2_td_2" fill="none" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"
d="M140,490 Q140,510 160,510 H190 Q210,510 210,533"/>
<path id="tr_2-tr_2_td_1" fill="none" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"
d="M500,490 Q500,510 480,510 H450 Q430,510 430,533"/>
<path id="tr_2-tr_2_td_2" fill="none" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"
d="M500,490 Q500,510 540,510 H550 Q570,510 570,533"/>
<line id="tr_1_td_1-text" x1="70" y1="580" x2="70" y2="603" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
<line id="tr_1_td_2-text" x1="210" y1="580" x2="210" y2="603" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
<line id="tr_2_td_1-text" x1="430" y1="580" x2="430" y2="603" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
<line id="tr_2_td_2-text" x1="570" y1="580" x2="570" y2="603" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
</g>
<g id="event-flow" stroke-dasharray="10,5">
<g id="capture_phase">
<a xlink:href="../DOM3-Events.html#glossary-capture-phase" target="_parent"><text fill="red" font-family="Verdana, sans-serif" font-size="20" font-weight="bold" text-anchor="middle"><tspan x="150" y="220">Capture</tspan> <tspan x="150" y="240">Phase</tspan> <tspan x="150" y="260">(1)</tspan></text></a>
<path id="capture_phase_arrow" fill="none" stroke="red" stroke-width="3" marker-end="url(#redArrow)" stroke-linecap="round"
d="M235,28 C195,25 195,75 238,85 "/>
<use xlink:href="#capture_phase_arrow" x="5" y="70" />
<use xlink:href="#capture_phase_arrow" x="10" y="140" />
<use xlink:href="#capture_phase_arrow" x="10" y="210" />
<use xlink:href="#capture_phase_arrow" x="10" y="280" />
<path id="capture_phase_arrow2" fill="none" stroke="red" stroke-width="3" marker-end="url(#redArrow)" stroke-linecap="round"
d="M245,378 C205,375 205,473 428,458 "/>
<path id="capture_phase_arrow3" fill="none" stroke="red" stroke-width="3" marker-end="url(#redArrow)" stroke-linecap="round"
stroke-dasharray="none" d="M428,473 C330,470 330,533 363,548 "/>
</g>
<g id="target_phase">
<a xlink:href="../DOM3-Events.html#glossary-target-phase" target="_parent"><text fill="blue" font-family="Verdana, sans-serif" font-size="20" font-weight="bold" text-anchor="middle"><tspan x="337" y="580">Target</tspan> <tspan x="337" y="600">Phase</tspan> <tspan x="337" y="620">(2)</tspan></text></a>
<rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="none" stroke="black" stroke-width="5" stroke-dasharray="none"
transform="translate(430, 540)"/>
</g>
<g id="bubble_phase">
<a xlink:href="../DOM3-Events.html#glossary-bubbling-phase" target="_parent"><text fill="green" font-family="Verdana, sans-serif" font-size="20" font-weight="bold" text-anchor="middle"><tspan x="490" y="320">Bubbling</tspan> <tspan x="490" y="340">Phase</tspan> <tspan x="490" y="360">(3)</tspan></text></a>
<path id="bubble_phase_arrow3" fill="none" stroke="green" stroke-width="3" marker-end="url(#greenArrow)" stroke-linecap="round"
stroke-dasharray="none" d="M492,548 C630,483 630,470 562,473"/>
<path id="bubble_phase_arrow2" fill="none" stroke="green" stroke-width="3" marker-end="url(#greenArrow)" stroke-linecap="round"
d="M565,457 C605,447 605,398 377,388"/>
<path id="bubble_phase_arrow" fill="none" stroke="green" stroke-width="3" marker-end="url(#greenArrow)" stroke-linecap="round"
d="M375,375 C415,372 415,332 375,322"/>
<use xlink:href="#bubble_phase_arrow" x="0" y="-70" />
<use xlink:href="#bubble_phase_arrow" x="0" y="-140" />
<path id="bubble_phase_arrow4" fill="none" stroke="green" stroke-width="3" marker-end="url(#greenArrow)" stroke-linecap="round"
d="M375,165 C425,162 425,122 385,112"/>
<path id="bubble_phase_arrow" fill="none" stroke="green" stroke-width="3" marker-end="url(#greenArrow)" stroke-linecap="round"
d="M385,95 C435,92 435,52 395,42"/>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

2
2-ui/2-events-and-interfaces/5-event-delegation/article.md
View file

@ -79,7 +79,7 @@ function highlight(node) {
Естественно, клик может произойти внутри `<td>`, на элементе `<strong>`. Такой клик будет пойман единым обработчиком, но `target` у него будет не `<td>`, а `<strong>`:
<img src="bagua.png">
<img src="bagua-bubble.svg">
Внутри обработчика `table.onclick` мы должны по `event.target` разобраться, в каком именно `<td>` был клик.

24
2-ui/2-events-and-interfaces/5-event-delegation/bagua-bubble.svg Normal file
View file

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="320px" height="216px" viewBox="0 0 320 216" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>bagua-bubble.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="bagua-bubble.svg" sketch:type="MSArtboardGroup">
<path d="M202.48764,140 L217,186 L103,186 L117.51236,140 L202.48764,140 Z" id="Rectangle-210" fill="#FFDE99" sketch:type="MSShapeGroup"></path>
<path d="M223.23146,72 L245,141 L74,141 L95.76854,72 L223.23146,72 Z" id="Rectangle-209" stroke="#CFCE95" stroke-width="18" sketch:type="MSShapeGroup"></path>
<path d="M242.611787,20 L271,110 L48,110 L76.388213,20 L242.611787,20 Z" id="Rectangle-208" stroke="#99C0C3" stroke-width="18" sketch:type="MSShapeGroup"></path>
<path d="M155.500875,123 L155.500875,110 L155.500875,110 L164.499875,110 L164.499875,123 L155.500875,123 Z M155.500875,141 L155.500875,154.816139 C155.500875,157.302139 157.514875,159.316139 160.000875,159.316139 C162.484875,159.316139 164.499875,157.302139 164.499875,154.816139 L164.499875,141 L155.500875,141 Z M155.500875,92 L155.500875,35.6981394 L145.361875,45.8351394 C143.605875,47.5921394 140.756875,47.5921394 138.998875,45.8351394 C137.240875,44.0771394 137.240875,41.2281394 138.998875,39.4711394 L156.637875,21.8311394 C157.563875,20.9071394 158.789875,20.4821394 160.000875,20.5311394 C161.210875,20.4821394 162.437875,20.9071394 163.361875,21.8311394 L181.001875,39.4711394 C182.758875,41.2281394 182.758875,44.0771394 181.001875,45.8351394 C179.243875,47.5921394 176.394875,47.5921394 174.637875,45.8351394 L164.499875,35.6981394 L164.499875,92 L155.500875,92 Z" id="Fill-46" fill="#5A4739" sketch:type="MSShapeGroup"></path>
<text id="&lt;table&gt;" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#99C0C3">
<tspan x="9" y="30">&lt;table&gt;</tspan>
</text>
<text id="&lt;td&gt;" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#CFCE95">
<tspan x="36" y="136">&lt;td&gt;</tspan>
</text>
<text id="&lt;strong&gt;" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#E8C48E">
<tspan x="35" y="181">&lt;strong&gt;</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
2-ui/2-events-and-interfaces/5-event-delegation/bagua.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.5 KiB