元素绑定事件

• 在HTML中绑定:
  绑定:
  <xxx on事件名="js语句">
  当事件发生时: 自动执行js语句
  问题: 不符合内容与行为分离的原则，不便于维护和重用
  在组件开发中，反而要求内容，行为和样式集中定义在一个小组件内，自成体系。

• 在js中绑定, 每个事件只能绑定一个处理函数:
  绑定：

xxx.on事件名=function(){ ... }

当事件发生时: xxx.on事件名() //this->xxx
用赋值方式绑定事件处理函数

• 事件监听，每个事件可绑定多个处理函数:

xxx.addEventListener('事件名',handler)

在浏览器中为xxx元素的指定事件，添加一个事件监听对象。将事件监听对象加入到浏览器的监听队列中。
触发事件时: 浏览器会遍历监听队列中的每个监听对象，找到触发事件元素上对应事件的监听对象，调用其处理函数
移除事件监听:

xxx.removeEventListener('事件名',handler)

说明: handler必须是绑定时使用的原函数对象
强调: 如果一个处理函数，有可能被移除，则不能使用匿名函数绑定。应使用有名的函数绑定