0
点赞
收藏
分享

微信扫一扫

事件周期:捕获=>目标触发=>冒泡


***事件周期: 
   DOM标准: 3阶段
      1. 捕获(capture): 由外向内依次记录各级元素绑定的相同事件处理函数
      2. 目标触发: 执行实际触发事件的元素上的处理函数
      3. 冒泡: 由目标元素向外,出发各级父元素上绑定的相同事件处理函数
        目标元素(target): 实际触发事件的元素     

   IE8: 2个阶段: 没有捕获阶段   

   事件对象: event: 在事件发生时,自动创建的封装所有事件信息的对象
       event对象提供了操控事件的方法: 阻止事件, 取消冒泡....
   何时: 1. 为了获得事件相关的数据
            2. 操控事件
   如何: 
      获取: DOM标准: 事件对象,默认作为事件处理函数的第一个参数传入: 
               IE8: 事件对象自动保存在全局变量event中
         兼容: function eventHandler(e){
         e=e||window.event;
                  }
      
   取消冒泡: e.stopPropagation();
   利用冒泡: 
   优化: 尽量少的添加EventListener
       为什么: 每个EventListener都是一个对象
          浏览器触发事件时,会轮询每个EventListener对象
          添加的EventListener越多,页面响应速度越低
   解决: 当多个平级子元素绑定相同的事件处理函数时
           其实,只要在父元素绑定一次,所有子元素共用即可!
   难题: 1. 如何获得目标元素:
              this->父元素 X
              DOM: e.target ->目标元素
              IE8: e.srcElement
                  兼容: var target=e.target||e.srcElement;
            2. 鉴别目标元素是否想要: 
              判断元素的名称或属性

举报

相关推荐

0 条评论