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/

延伸阅读

---

▶ Walkthrough007