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

images to svg

Browse source
This commit is contained in:
Ilya Kantor 2019-07-28 15:42:37 +03:00
parent a31e881856
commit 3ba28aa104
734 changed files with 11682 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

4
2-ui/2-events/02-bubbling-and-capturing/article.md
View file

@ -41,7 +41,7 @@ A click on the inner `<p>` first runs `onclick`:
3. Then on the outer `<form>`.
4. And so on upwards till the `document` object.
![](event-order-bubbling.png)
![](event-order-bubbling.svg)
So if we click on `<p>`, then we'll see 3 alerts: `p` -> `div` -> `form`.
@ -128,7 +128,7 @@ The standard [DOM Events](http://www.w3.org/TR/DOM-Level-3-Events/) describes 3
Here's the picture of a click on `<td>` inside a table, taken from the specification:
![](eventflow.png)
![](eventflow.svg)
That is: for a click on `<td>` the event first goes through the ancestors chain down to the element (capturing phase), then it reaches the target and triggers there (target phase), and then it goes up (bubbling phase), calling handlers on its way.

BIN
2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 10 KiB

28
2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.svg Normal file
View file

@ -0,0 +1,28 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="353px" height="216px" viewBox="0 0 353 216" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>event-order-bubbling.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="event-order-bubbling.svg">
<polygon id="Rectangle-210" fill="#FFDE99" points="159.48764 140 174 186 60 186 74.51236 140"></polygon>
<path d="M173.633566,81 L59.3664344,81 L43.2766439,132 L189.723356,132 L173.633566,81 Z" id="Rectangle-209" stroke="#CFCE95" stroke-width="18"></path>
<path d="M193.013506,29 L39.9864943,29 L17.2759239,101 L215.724076,101 L193.013506,29 Z" id="Rectangle-208" stroke="#99C0C3" stroke-width="18"></path>
<path d="M121.499875,123 L112.500875,123 L112.500875,110 L121.499875,110 L121.499875,123 Z M121.499875,141 L121.499875,154.816139 C121.499875,157.302139 119.484875,159.316139 117.000875,159.316139 C114.514875,159.316139 112.500875,157.302139 112.500875,154.816139 L112.500875,141 L121.499875,141 Z M121.499875,92 L112.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 Z" id="Fill-46" fill="#5A4739"></path>
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#5A4739">
<tspan x="210" y="105">1</tspan>
</text>
<text id="2" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#5A4739">
<tspan x="185" y="136">2</tspan>
</text>
<text id="3" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="157" y="181">3</tspan>
</text>
<text id="Most-deeply-nested-e" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="228.480469" y="175">Most deeply </tspan>
<tspan x="216.305664" y="194">nested element</tspan>
</text>
<path d="M179.5,177.5 L209.5,177.5" id="Line-30" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 24 KiB

BIN
2-ui/2-events/02-bubbling-and-capturing/eventflow.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 70 KiB

198
2-ui/2-events/02-bubbling-and-capturing/eventflow.svg Normal file
View file

@ -0,0 +1,198 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="641px" height="633px" viewBox="0 0 641 633" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>eventflow.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="eventflow.svg">
<g id="eventflow" transform="translate(22.000000, 28.000000)">
<g id="nodes">
<g id="Window-node" transform="translate(224.684713, 0.000000)">
<g id="Group">
<rect id="Rectangle-path" stroke="#000000" fill="#DCDCDC" x="0" y="0" width="134.426752" height="34.5671642"></rect>
<text id="Window" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="39.3678344" y="21.9134328">Window</tspan>
</text>
</g>
</g>
<g id="document-node" transform="translate(234.286624, 60.492537)">
<g id="Group">
<rect id="Rectangle-path" stroke="#000000" fill="#DCDCDC" x="0" y="0" width="115.22293" height="34.5671642"></rect>
<text id="Document" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="22.0843949" y="21.9134328">Document</tspan>
</text>
</g>
</g>
<g id="html-node" transform="translate(243.888535, 120.985075)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;html&gt;" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="23.044586" y="21.9134328">&lt;html&gt;</tspan>
</text>
</g>
<g id="body-node" transform="translate(243.888535, 181.477612)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;body&gt;" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="23.044586" y="21.9134328">&lt;body&gt;</tspan>
</text>
</g>
<g id="table-node" transform="translate(243.888535, 241.970149)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;table&gt;" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="23.044586" y="21.9134328">&lt;table&gt;</tspan>
</text>
</g>
<g id="tbody-node" transform="translate(243.888535, 302.462687)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;tbody&gt;" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="19.2038217" y="21.9134328">&lt;tbody&gt;</tspan>
</text>
</g>
<g id="tr_1-node" transform="translate(80.656051, 380.238806)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;tr&gt;" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="35.5270701" y="21.9134328">&lt;tr&gt;</tspan>
</text>
</g>
<g id="tr_2-node" transform="translate(426.324841, 380.238806)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;tr&gt;" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="33.6066879" y="21.9134328">&lt;tr&gt;</tspan>
</text>
</g>
<g id="tr_1_td_1-node" transform="translate(13.442675, 458.014925)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;td&gt;" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="31.6863057" y="21.9134328">&lt;td&gt;</tspan>
</text>
</g>
<g id="tr_1_td_1_text-node" transform="translate(0.000000, 518.507463)">
<ellipse id="Oval" stroke="#000000" fill="#4682B4" cx="61.4522293" cy="30.2462687" rx="61.4522293" ry="30.2462687"></ellipse>
<text id="Shady-Grove" fill="#FFFFFF" font-family="OpenSans-Regular, Open Sans" font-size="12.9626866" font-weight="normal">
<tspan x="19.2038217" y="34.6044776">Shady Grove</tspan>
</text>
</g>
<g id="tr_1_td_2-node" transform="translate(147.869427, 458.014925)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;td&gt;" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="33.6066879" y="21.9134328">&lt;td&gt;</tspan>
</text>
</g>
<g id="tr_1_td_2_text-node" transform="translate(134.426752, 518.507463)">
<ellipse id="Oval" stroke="#000000" fill="#4682B4" cx="61.4522293" cy="30.2462687" rx="61.4522293" ry="30.2462687"></ellipse>
<text id="Aeolian" fill="#FFFFFF" font-family="OpenSans-Regular, Open Sans" font-size="12.9626866" font-weight="normal">
<tspan x="36.9673567" y="34.6044776">Aeolian</tspan>
</text>
</g>
<g id="tr_2_td_1-node" transform="translate(359.111465, 458.014925)">
<rect id="Rectangle-path" stroke="#000000" fill="#0000FF" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;td&gt;" fill="#FFFFFF" font-family="PTMono-Regular, PT Mono" font-size="15.5552239" font-weight="normal">
<tspan x="27.8455414" y="22.3701493">&lt;td&gt;</tspan>
</text>
</g>
<g id="tr_2_td_1_text-node" transform="translate(345.668790, 518.507463)">
<ellipse id="Oval" stroke="#000000" fill="#4682B4" cx="61.4522293" cy="30.2462687" rx="61.4522293" ry="30.2462687"></ellipse>
<g id="Group" transform="translate(12.482484, 14.555224)" fill="#FFFFFF" font-family="OpenSans-Regular, Open Sans" font-size="12.9626866" font-weight="normal">
<text id="Over-the-River,">
<tspan x="0.480095541" y="14">Over the River,</tspan>
</text>
<text id="Charlie">
<tspan x="25.9251592" y="31.2835821">Charlie</tspan>
</text>
</g>
</g>
<g id="tr_2_td_2-node" transform="translate(493.538217, 458.014925)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;td&gt;" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="33.6066879" y="21.9134328">&lt;td&gt;</tspan>
</text>
</g>
<g id="tr_2_td_2_text-node" transform="translate(480.095541, 518.507463)">
<ellipse id="Oval" stroke="#000000" fill="#4682B4" cx="61.4522293" cy="30.2462687" rx="61.4522293" ry="30.2462687"></ellipse>
<text id="Dorian" fill="#FFFFFF" font-family="OpenSans-Regular, Open Sans" font-size="12.9626866" font-weight="normal">
<tspan x="39.8479299" y="34.6044776">Dorian</tspan>
</text>
</g>
</g>
<g id="edges" transform="translate(61.452229, 34.567164)" stroke="#000000" stroke-width="2">
<path d="M230.44586,0 L230.44586,19.8761194" id="window-document" fill="#000000"></path>
<path d="M230.44586,60.4925373 L230.44586,80.3686567" id="document-html" fill="#000000"></path>
<path d="M230.44586,120.985075 L230.44586,140.861194" id="html-body" fill="#000000"></path>
<path d="M230.44586,181.477612 L230.44586,201.353731" id="body-table" fill="#000000"></path>
<path d="M230.44586,241.970149 L230.44586,261.846269" id="table-tbody" fill="#000000"></path>
<path d="M230.44586,302.462687 C230.44586,313.985075 214.442675,319.746269 182.436306,319.746269 L86.4171975,319.746269 C73.6146497,319.746269 67.2133758,326.371642 67.2133758,339.622388" id="tbody-tr_1"></path>
<path d="M230.44586,302.462687 C230.44586,313.985075 252.850318,319.746269 297.659236,319.746269 L393.678344,319.746269 C406.480892,319.746269 412.882166,326.371642 412.882166,339.622388" id="tbody-tr_2"></path>
<path d="M67.2133758,380.238806 C67.2133758,391.761194 60.8121019,397.522388 48.0095541,397.522388 L19.2038217,397.522388 C6.40127389,397.522388 0,404.147761 0,417.398507" id="tr_1-tr_2_td_1"></path>
<path d="M67.2133758,380.238806 C67.2133758,391.761194 73.6146497,397.522388 86.4171975,397.522388 L115.22293,397.522388 C128.025478,397.522388 134.426752,404.147761 134.426752,417.398507" id="tr_1-tr_2_td_2"></path>
<path d="M412.882166,380.238806 C412.882166,391.761194 406.480892,397.522388 393.678344,397.522388 L364.872611,397.522388 C352.070064,397.522388 345.66879,404.147761 345.66879,417.398507" id="tr_2-tr_2_td_1"></path>
<path d="M412.882166,380.238806 C412.882166,391.761194 425.684713,397.522388 451.289809,397.522388 L460.89172,397.522388 C473.694268,397.522388 480.095541,404.147761 480.095541,417.398507" id="tr_2-tr_2_td_2"></path>
<path d="M0,458.014925 L0,477.891045" id="tr_1_td_1-text" fill="#000000"></path>
<path d="M134.426752,458.014925 L134.426752,477.891045" id="tr_1_td_2-text" fill="#000000"></path>
<path d="M345.66879,458.014925 L345.66879,477.891045" id="tr_2_td_1-text" fill="#000000"></path>
<path d="M482.015924,458.014925 L482.015924,477.891045" id="tr_2_td_2-text" fill="#000000"></path>
</g>
<g id="event-flow" transform="translate(103.700637, 14.691045)">
<g id="target_phase" transform="translate(186.277070, 443.323881)">
<text id="Target" fill="#0000FF" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="0.960191083" y="34.1477612">Target</tspan>
</text>
<text id="Phase" fill="#0000FF" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="0.480095541" y="51.4313433">Phase</tspan>
</text>
<text id="(2)" fill="#0000FF" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="15.8431529" y="68.7149254">(2)</tspan>
</text>
<rect id="Rectangle-path" stroke="#000000" stroke-width="5" x="69.133758" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
</g>
<g id="capture_phase">
<text id="Capture" fill="#FF0000" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="0" y="166.367164">Capture</tspan>
</text>
<text id="Phase" fill="#FF0000" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="7.20143312" y="183.650746">Phase</tspan>
</text>
<text id="(1)" fill="#FF0000" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="22.5644904" y="200.934328">(1)</tspan>
</text>
<path d="M116.183121,0.864179104 C77.7754777,-1.72835821 77.7754777,41.480597 119.063694,50.1223881" id="capture_phase_arrow" stroke="#FF0000" stroke-width="3"></path>
<g id="capture_phase_arrow-link" transform="translate(92.178344, 60.492537)" stroke="#FF0000" stroke-width="3">
<path d="M28.8057325,0.864179104 C-9.60191083,-1.72835821 -9.60191083,41.480597 31.6863057,50.1223881" id="capture_phase_arrow"></path>
</g>
<g id="capture_phase_arrow-link" transform="translate(96.979299, 120.985075)" stroke="#FF0000" stroke-width="3">
<path d="M28.8057325,0.864179104 C-9.60191083,-1.72835821 -9.60191083,41.480597 31.6863057,50.1223881" id="capture_phase_arrow"></path>
</g>
<g id="capture_phase_arrow-link" transform="translate(96.979299, 181.477612)" stroke="#FF0000" stroke-width="3">
<path d="M28.8057325,0.864179104 C-9.60191083,-1.72835821 -9.60191083,41.480597 31.6863057,50.1223881" id="capture_phase_arrow"></path>
</g>
<g id="capture_phase_arrow-link" transform="translate(96.979299, 241.970149)" stroke="#FF0000" stroke-width="3">
<path d="M28.8057325,0.864179104 C-9.60191083,-1.72835821 -9.60191083,41.480597 31.6863057,50.1223881" id="capture_phase_arrow"></path>
</g>
<path d="M125.785032,303.326866 C87.3773885,300.734328 87.3773885,385.423881 301.5,372.461194" id="capture_phase_arrow2" stroke="#FF0000" stroke-width="3"></path>
<path d="M301.5,385.423881 C207.401274,382.831343 207.401274,437.274627 239.08758,450.237313" id="capture_phase_arrow3" stroke="#FF0000" stroke-width="3"></path>
</g>
<g id="bubble_phase" transform="translate(250.609873, 12.962687)">
<text id="Bubbling" fill="#008000" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="72.9745223" y="239.822388">Bubbling</tspan>
</text>
<text id="Phase" fill="#008000" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="83.0565287" y="257.10597">Phase</tspan>
</text>
<text id="(3)" fill="#008000" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="98.419586" y="274.389552">(3)</tspan>
</text>
<path d="M112.342357,437.274627 C244.848726,381.102985 244.848726,369.868657 179.555732,372.461194" id="bubble_phase_arrow3" stroke="#008000" stroke-width="3"></path>
<path d="M182.436306,358.634328 C220.843949,349.992537 220.843949,307.647761 1.92038217,299.00597" id="bubble_phase_arrow2" stroke="#008000" stroke-width="3"></path>
<path d="M0,287.771642 C38.4076433,285.179104 38.4076433,250.61194 0,241.970149" id="bubble_phase_arrow" stroke="#008000" stroke-width="3"></path>
<g id="bubble_phase_arrow-link" transform="translate(0.000000, 181.477612)" stroke="#008000" stroke-width="3">
<path d="M0,45.8014925 C38.4076433,43.2089552 38.4076433,8.64179104 0,0" id="bubble_phase_arrow"></path>
</g>
<g id="bubble_phase_arrow-link" transform="translate(0.000000, 120.985075)" stroke="#008000" stroke-width="3">
<path d="M0,45.8014925 C38.4076433,43.2089552 38.4076433,8.64179104 0,0" id="bubble_phase_arrow"></path>
</g>
<path d="M0,106.29403 C48.0095541,103.701493 48.0095541,69.1343284 9.60191083,60.4925373" id="bubble_phase_arrow4" stroke="#008000" stroke-width="3"></path>
<path d="M9.60191083,45.8014925 C57.611465,43.2089552 57.611465,8.64179104 19.2038217,0" id="bubble_phase_arrow" stroke="#008000" stroke-width="3"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
2-ui/2-events/02-bubbling-and-capturing/eventflow@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 160 KiB