監(jiān)聽函數(shù)
瀏覽器的事件模型烦味，就是通過監(jiān)聽函數(shù)（listener）對事件做出反應聂使。事件發(fā)生后，瀏覽器監(jiān)聽到了這個事件谬俄，就會執(zhí)行對應的監(jiān)聽函數(shù)柏靶。這是事件驅(qū)動編程模式（event-driven）的主要編程方式。
JavaScript 有三種方法溃论，可以為事件綁定監(jiān)聽函數(shù)屎蜓。
HTML 的 on- 屬性
HTML 語言允許在元素的屬性中，直接定義某些事件的監(jiān)聽代碼钥勋。
<body onload="doSomething()">
<div onclick="console.log('觸發(fā)事件')">
上面代碼為body節(jié)點的load事件炬转、div節(jié)點的click事件，指定了監(jiān)聽代碼算灸。一旦事件發(fā)生扼劈，就會執(zhí)行這段代碼。
元素的事件監(jiān)聽屬性菲驴，都是on加上事件名荐吵，比如onload就是on + load，表示load事件的監(jiān)聽代碼谢翎。
注意捍靠，這些屬性的值是將會執(zhí)行的代碼，而不是一個函數(shù)森逮。
<!-- 正確 -->
<body onload="doSomething()">
<!-- 錯誤 -->
<body onload="doSomething">
一旦指定的事件發(fā)生榨婆，on-屬性的值是原樣傳入 JavaScript 引擎執(zhí)行。因此如果要執(zhí)行函數(shù)褒侧，不要忘記加上一對圓括號良风。
使用這個方法指定的監(jiān)聽代碼谊迄，只會在冒泡階段觸發(fā)。
<div onClick="console.log(2)">
<button onClick="console.log(1)">點擊</button>
</div>
上面代碼中烟央，<button>是<div>的子元素统诺。<button>的click事件，也會觸發(fā)<div>的click事件疑俭。由于on-屬性的監(jiān)聽代碼粮呢，只在冒泡階段觸發(fā)，所以點擊結(jié)果是先輸出1钞艇，再輸出2啄寡，即事件從子元素開始冒泡到父元素。
直接設(shè)置on-屬性哩照，與通過元素節(jié)點的setAttribute方法設(shè)置on-屬性挺物，效果是一樣的。
el.setAttribute('onclick', 'doSomething()');
// 等同于
// <Element onclick="doSomething()">
