• クリック

解説

$("article").clickとすることでarticleにイベントハンドラを設置しています。article部分（白の背景色部分）をクリックするとarticleの背景色が赤になります。けれどもarticleの子要素section（ピンクの背景色部分）をクリックしてもarticleの背景色が赤になります。また更にsectionの子要素li（青の背景色部分）をクリックしてもarticleの背景色が赤になります。この現象がバブリングというイベントの伝播になります。liをクリックするとイベントのバブリングが起こり、sectionにもarticleにもクリックイベントが伝わります。そしてarticleに設置したイベントハンドラが発火してarticleの背景色が赤になるわけです。けれども今度はグレー部分のbody要素をクリックしても伝播はおこりません。これはキャプチャリングが起こってないことを示しています。