davidbgk
/
larlet-fr-david-cache
关注 1
点赞 0
派生 0
代码 版本发布 0 动态
A place to cache linked articles (think custom and personal wayback machine)
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
130 提交
1 分支
目录树: 1c6286ce6e
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 '1c6286ce6e'
${ noResults }
larlet-fr-david-cache/cache/a90e5a0df79fca21cb3a03be83b.../index.html

index.html 29KB
原始文件 Blame 文件历史

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>Javascript - Event order (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="http://www.quirksmode.org/js/events_order.html">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   Javascript - Event order (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="http://www.quirksmode.org/js/events_order.html">Source originale du contenu</a></h3>

  463.     <p class="intro">On the <a href="introevents.html">Introduction to events</a> page&#13;I asked a question that at first sight seems incomprehensible:&#13;“If an element and one of its ancestors have an event handler for the same event, which&#13;one should fire first?” Not surprisingly, this depends on the browser.</p>

  464. 

  465. <p>&#13;&#13;<p>The basic problem is very simple. Suppose you have a element inside an element</p>

  466. <pre>

  467.     -----------------------------------

  468.     | element1                        |

  469.     |   -------------------------     |

  470.     |   |element2               |     |

  471.     |   -------------------------     |

  472.     |                                 |

  473.     -----------------------------------

  474. </pre>&#13;&#13;<p>and both have an onClick event handler. If the user clicks on element2 he causes&#13;a click event in both element1 and element2. But which event fires first? Which event handler should&#13;be executed first? What, in other words, is the <em>event order</em>?</p>&#13;&#13;<h3>Two models</h3>&#13;&#13;<p>Not surprisingly, back in the bad old days Netscape and Microsoft came to different conclusions.</p>&#13;&#13;<ul><li>Netscape said that the event on element1 takes place first. This is called&#13;event <em>capturing</em>.</li>&#13;<li>Microsoft maintained that the event on element2 takes precedence. This is called&#13;event <em>bubbling</em>.</li>&#13;</ul>&#13;&#13;<p>The two event orders are radically opposed. Explorer&#13;only supports event bubbling. Mozilla, Opera 7 and Konqueror support both. Older Opera's and&#13;iCab support neither.</p>&#13;&#13;<h4>Event capturing</h4>&#13;&#13;<p>When you use event capturing</p>&#13;&#13;

  475. <pre>

  476.                    | |

  477.     ---------------| |-----------------

  478.     | element1     | |                |

  479.     |   -----------| |-----------     |

  480.     |   |element2  \ /          |     |

  481.     |   -------------------------     |

  482.     |        Event CAPTURING          |

  483.     -----------------------------------

  484. </pre>&#13;&#13;<p>the event handler of element1 fires first, the event handler of element2 fires last.</p>&#13;&#13;&#13;<h4>Event bubbling</h4>&#13;&#13;<p>When you use event bubbling</p>&#13;&#13;

  485. <pre>

  486.                    / \

  487.     ---------------| |-----------------

  488.     | element1     | |                |

  489.     |   -----------| |-----------     |

  490.     |   |element2  | |          |     |

  491.     |   -------------------------     |

  492.     |        Event BUBBLING           |

  493.     -----------------------------------

  494. </pre>&#13;&#13;<p>the event handler of element2 fires first, the event handler of element1 fires last.</p>&#13;&#13;<h3>W3C model</h3>&#13;&#13;<p>W3C has very sensibly decided to take a middle position in this struggle.&#13;Any event taking place in the&#13;<a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/" class="external">W3C event model</a> is first captured until it&#13;reaches the target element and then bubbles up again.</p>&#13;&#13;

  495. <pre>

  496.                      | |  / \

  497.     -----------------| |--| |-----------------

  498.     | element1       | |  | |                |

  499.     |   -------------| |--| |-----------     |

  500.     |   |element2    \ /  | |          |     |

  501.     |   --------------------------------     |

  502.     |        W3C event model                 |

  503.     ------------------------------------------

  504. </pre>&#13;&#13;<p>You, the web developer, can choose whether to register an event handler in the capturing or&#13;in the bubbling phase. This is done through the <code>addEventListener()</code>&#13;method explained on the <a href="events_advanced.html">Advanced models</a> page.&#13;If its last argument is <code>true</code> the event handler is set for the capturing phase, if it is&#13;<code>false</code> the event handler is set for the bubbling phase.</p>&#13;&#13;<p>Suppose you do</p>&#13;&#13;<pre>&#13;element1.addEventListener('click',doSomething2,true)&#13;element2.addEventListener('click',doSomething,false)&#13;</pre>&#13;&#13;<p>If the user clicks on element2 the following happens:</p>&#13;&#13;<ol>&#13;<li>The <code>click</code> event starts in the capturing phase. The event looks if any&#13;ancestor element of element2 has a <code>onclick</code> event handler for the capturing&#13;phase.</li>&#13;<li>The event finds one on element1. <code>doSomething2()</code> is&#13;executed.</li>&#13;<li>The event travels down to the target itself, no more event handlers for the capturing&#13;phase are found. The event moves to its bubbling phase and executes <code>doSomething()</code>,&#13;which is registered to element2 for the bubbling phase.</li>&#13;<li>The event travels upwards again and checks if any ancestor element of the&#13;target has an event handler for the bubbling phase. This is not the case, so nothing happens.</li>&#13;</ol>&#13;&#13;&#13;<p>The reverse would be</p>&#13;&#13;<pre>&#13;element1.addEventListener('click',doSomething2,false)&#13;element2.addEventListener('click',doSomething,false)&#13;</pre>&#13;&#13;<p>Now if the user clicks on element2 the following happens:</p>&#13;&#13;<ol>&#13;<li>The <code>click</code> event starts in the capturing phase. The event looks if any&#13;ancestor element of element2 has a <code>onclick</code> event handler for the capturing&#13;phase and doesn’t find any.</li>&#13;<li>The event travels down to the target itself.&#13;The event moves to its bubbling phase and executes <code>doSomething()</code>,&#13;which is registered to element2 for the bubbling phase.</li>&#13;<li>The event travels upwards again and checks if any ancestor element of the&#13;target has an event handler for the bubbling phase.</li>&#13;<li>The event finds one on element1. Now <code>doSomething2()</code> is executed.</li>&#13;</ol>&#13;&#13;<h4>Compatibility with traditional model</h4>&#13;&#13;<p>In the browsers that support the W3C DOM, a traditional event registration</p>&#13;&#13;<pre>&#13;element1.onclick = doSomething2;&#13;</pre>&#13;&#13;<p>is seen as a registration in the <em>bubbling phase</em>.</p>&#13;&#13;&#13;<h3>Use of event bubbling</h3>&#13;&#13;<p>Few web developers consciously use event capturing or bubbling. In Web pages as they are made&#13;today, it is simply not necessary to let a bubbling event be handled by several different event handlers.&#13;Users might get confused by several things happening after one mouse click, and usually you want&#13;to keep your event handling scripts separated. When the user clicks on an element, something happens,&#13;when he clicks on another element, something else happens.</p>&#13;&#13;<p>Of course this might change in the future, and it’s good to have models available that&#13;are forward compatible. But the main practical use of event capturing and bubbling today&#13;is the registration of default functions.</p>&#13;&#13;<h3>It always happens</h3>&#13;&#13;<p>What you first need to understand is that event capturing or bubbling always happens.&#13;If you define a general onclick event handler for your entire document</p>&#13;&#13;<pre>&#13;document.onclick = doSomething;&#13;if (document.captureEvents) document.captureEvents(Event.CLICK);&#13;</pre>&#13;&#13;<p>any <code>click</code> event on any element in the document will eventually bubble up to the document and&#13;thus fire this general event handler.&#13;Only when a previous event handling script explicitly orders the event to stop bubbling, it will not propagate to the&#13;document.</p>&#13;&#13;<h3>Uses</h3>&#13;&#13;<p>Because any event ends up on the document, default event handlers become possible.&#13;Suppose you have this page:</p>&#13;&#13;

  505. <pre>

  506.     ------------------------------------

  507.     | document                         |

  508.     |   ---------------  ------------  |

  509.     |   | element1    |  | element2 |  |

  510.     |   ---------------  ------------  |

  511.     |                                  |

  512.     ------------------------------------</p>

  513. <pre><code>element1.onclick = doSomething;

  514. element2.onclick = doSomething;

  515. document.onclick = defaultFunction;

  516. </code></pre>

  517. <p></pre>

  518. &#13;<p>Now if the user clicks on element1 or 2, <code>doSomething()</code> is executed. You can&#13;stop the event propagation here, if you wish. If you don’t the event bubbles up to&#13;<code>defaultFunction()</code>.&#13;If the user clicks anywhere else <code>defaultFunction()</code> is also executed. This might be&#13;useful sometimes.</p>&#13;&#13;&#13;<p>Setting document–wide event handlers is necessary in drag–and–drop&#13;scripts. Typically a <code>mousedown</code> event on a layer selects this layer and makes&#13;it respond to the <code>mousemove</code> event. Though the&#13;<code>mousedown</code> is usually registered on the layer to avoid browser bugs, both&#13;other event handlers must be document–wide.</p>&#13;&#13;<p>Remember the First Law of Browserology: anything can happen, and it usually does when you’re&#13;least prepared for it. So it may happen that the user moves his mouse very wildly and the&#13;script doesn’t keep up so that the mouse is not over the layer any more.</p>&#13;&#13;<ul>&#13;<li>If the <code>onmousemove</code> event handler is registered to the layer,&#13;the layer doesn’t react to the mouse movement any more, causing confusion.</li>&#13;&#13;<li>If the <code>onmouseup</code> event handler is registered on the layer,&#13;this event isn’t caught either so that the layer keeps reacting to the mouse&#13;movements even after the user thinks he dropped the layer. This causes even more confusion.</li>&#13;</ul>&#13;&#13;<p>So in this case event bubbling is very useful because registering&#13;your event handlers on document level makes sure they’re always executed.</p>&#13;&#13;<h3>Turning it off</h3>&#13;&#13;<p>But usually you want to turn all capturing and bubbling off to keep functions from&#13;interfering with each other.&#13;Besides, if your document structure is very complex (lots of nested tables and such) you may save system&#13;resources by turning off bubbling. The browser has to go through every single ancestor element&#13;of the event target to see if it has an event handler. Even if none are found, the search still takes time.</p>&#13;&#13;<p>In the Microsoft model you must set the event’s <code>cancelBubble</code> property to true.</p>&#13;&#13;<pre>&#13;window.event.cancelBubble = true&#13;</pre>&#13;&#13;<p>In the W3C model you must call the event’s <code>stopPropagation()</code> method. </p>&#13;&#13;<pre>&#13;e.stopPropagation()&#13;</pre>&#13;&#13;<p>This stops all propagation of the event in the bubbling phase. For a complete cross-browser experience do</p>&#13;&#13;<pre>&#13;function doSomething(e)&#13;{&#13;  if (!e) var e = window.event;&#13;  e.cancelBubble = true;&#13; if (e.stopPropagation) e.stopPropagation();&#13;}&#13;</pre>&#13;&#13;<p class="smaller">Setting the <code>cancelBubble</code> property in browsers that don’t support it doesn’t hurt.&#13;The browser shrugs and creates the property. Of course it doesn’t actually&#13;cancel the bubbling, but the assignment itself is safe.</p>&#13;&#13;<h3>currentTarget</h3>&#13;&#13;<p>As we’ve seen earlier, an event has a <code>target</code> or <code>srcElement</code> that&#13;contains a reference to the element the event happened on. In our example this is element2,&#13;since the user clicked on it.</p>&#13;&#13;<p>It is very important to understand that during the capturing and bubbling phases (if any)&#13;this target does not change: it always remains a reference to element2.</p>&#13;&#13;<p>But suppose we register these event handlers:</p>&#13;&#13;<pre>&#13;element1.onclick = doSomething;&#13;element2.onclick = doSomething;&#13;</pre>&#13;&#13;<p>If the user clicks on element2 <code>doSomething()</code> is executed twice. But how&#13;do you know which HTML element is currently handling the event? <code>target/srcElement</code>&#13;don’t give a clue, they always refer to element2 since it is the original source of the&#13;event.</p>&#13;&#13;<p>To solve this problem W3C has added the <code>currentTarget</code> property. It contains a&#13;reference to the HTML element the event is currently being handled by: exactly what we need.&#13;Unfortunately the Microsoft model doesn’t contain a similar property.</p>&#13;&#13;<p>You can also use&#13;<a href="this.html">the <code>this</code> keyword</a>.&#13;In the example above it refers to the HTML element the event is handled on, just like&#13;<code>currentTarget</code>.</p>&#13;&#13;<h3>Problems of the Microsoft model</h3>&#13;&#13;<p>But when you use the Microsoft event registration model&#13;the <code>this</code> keyword doesn’t refer to the HTML element. Combined with the&#13;lack of a <code>currentTarget</code>–like property in the Microsoft model,&#13;this means that if you do</p>&#13;&#13;<pre>&#13;element1.attachEvent('onclick',doSomething)&#13;element2.attachEvent('onclick',doSomething)&#13;</pre>&#13;&#13;<p>you <em>cannot</em> know which HTML element currently handles the event. This is the most&#13;serious problem with the Microsoft event registration model and for me it’s reason enough&#13;never to use it, not even in IE/Win only applications.</p>&#13;&#13;<p>I hope Microsoft will soon add a <code>currentTarget</code>–like property — or maybe&#13;even follow the standard? Web developers need this information.</p>&#13;&#13;<h3>Continue</h3>&#13;&#13;<p>If you wish to go through all event pages in order, you should now continue with the&#13;<a href="events_mouse.html">Mouse events</a> page.</p></p>

  519.   </article>

  520. </section>

  521. 

  522. 

  523. <nav id="jumpto">

  524.   <p>

  525.     <a href="/david/blog/">Accueil du blog</a> |

  526.     <a href="http://www.quirksmode.org/js/events_order.html">Source originale</a> |

  527.     <a href="/david/stream/2019/">Accueil du flux</a>

  528.   </p>

  529. </nav>

  530. 

  531. <footer>

  532.   <div>

  533.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  534.     <p>

  535.       Bonjour/Hi!

  536.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  537.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  538.     </p>

  539.     <p>

  540.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  541.     </p>

  542.     

  543.     <p>

  544.       Voici quelques articles choisis :

  545.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  546.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  547.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  548.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  549.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  550.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  551.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  552.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  553.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  554.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  555.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  556.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  557.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  558.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  559.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  560.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  561.     </p>

  562.     <p>

  563.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  564.     </p>

  565.     <p>

  566.       Je ne traque pas ta navigation mais mon

  567.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  568.       conserve des logs d’accès.

  569.     </p>

  570.   </div>

  571. </footer>

  572. <script type="text/javascript">

  573.   ;(_ => {

  574.     const jumper = document.getElementById('jumper')

  575.     jumper.addEventListener('click', e => {

  576.       e.preventDefault()

  577.       const anchor = e.target.getAttribute('href')

  578.       const targetEl = document.getElementById(anchor.substring(1))

  579.       targetEl.scrollIntoView({behavior: 'smooth'})

  580.     })

  581.   })()

  582. </script>