DOM

1. 事件模型
• 脚本模型

  <button onclick="javascript: alert('Hello')">Hello</button>

• 内联模型

  <button onclick="showHello()">Hello</button>

• 动态绑定

  /**
  * <button id="btn">Hello</button>
  */
  var btn = document.getElementById('btn');
  btn.addEventListener('click', function () {
    alert('Hello');
  });

2. 事件流
• 事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播，直到根节点
• 事件捕获：高层级节点先接收到事件，具体节点最后接到事件，事件捕获的用意在于在事件到达预定目标之前就捕获它
• 事件流
• 事件捕获阶段
• 处于目标阶段
• 事件冒泡阶段
3. 事件委托：利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的事件
• 优点
• 节省内存占用，减少事件注册
• 新增子对象时无需再对其做事件绑定，适合动态添加元素
• 局限性
• focus、blur之类的事件本身没有事件冒泡机制，所以无法委托
• mousemove、mouseout这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高，不适合事件委托

参考资料

1. www.cxymsg.com/guide/
   

微信公众号“前端那些事儿”