BOM之事件相关

事件

• 事件：浏览器自动触发的或用户手动触发的对象状态的改变
• 事件处理函数：当事件发生时，自动执行的函数对象
• 如何绑定事件处理函数：3种
  
  • 在JS动态绑定事件处理函数：elem.事件名 = 函数对象
    
    • 问题1：同一元素的同一事件处理函数，只能绑定一个函数对象
    • 问题2：无法修改事件触发的顺序
  • 在JS中动态绑定事件处理函数，可同时绑定多个，可修改事件触发顺序
    
    • DOM标准：elem.addEventListener(“事件名”,函数对象,是否在捕获阶段触发)
    • IE8：elem.attachEvent(“on事件名”,函数对象)
• 事件周期：从事件触发到各级事件执行完的全过程
  
  • DOM标准：3个阶段
    
    1. (从根开始，由外向内，到目标元素)捕获
    2. (实际触发事件的对象)目标触发
    3. (由目标向外，到根结束)冒泡触发
  • IE8：2个阶段
    
    1. (实际触发事件的对象)目标触发
    2. (由目标向外，到根结束)冒泡触发
  • 是否可修改事件执行顺序：可以
    
    • 修改addEventLister的第三个参数为true，可在捕获阶段提前触发，同一事件不可触发两次
• 事件对象：当事件发生时，自动创建的封装事件信息的对象
  
  • 获得事件对象：
    
    1. 在html中绑定事件处理函数：在html中显式使用event，兼容性最好
       
    2. 在JS中动态绑定事件处理函数
       
       • DOM标准：事件对象作为事件处理函数的第一个参数，传入函数中
         
         • arguments[0] —— 事件对象
       • IE8：事件对象是windows下的一个全局属性：window.event
       • 兼容性写法： var e = window.event||arguments[0]
• 固定套路
  
  • 取消冒泡：在当前事件处理函数执行结尾，阻止继续向上冒泡
    
    • DOM：e.stopPropagation();
    • IE8：e.cancelBubble = true
    • 兼容性代码：if(e.stopPropagation){ e.stopPropagation() }else{ e.cancelBubble=true }
  • 利用冒泡：
    
    • 优化：多个子元素，定义了相同的事件处理函数，其实只需要将事件处理函数在父元素上定义一次即可
    • why：每个处理函数绑定的都是一个对象，处理函数绑定得越多，网页的执行效率就越低。减少处理函数绑定的次数，可提高执行效率。
    • 获得目标元素： var target = e.srcElement||e.target
    • 目标元素 vs this
      
      • this：会随时间冒泡而改变
      • 目标元素，不受冒泡影响，始终保存最初的目标元素对象
  • 取消事件：事件执行过程中，发生异常状况，可阻止事件触发
    
    • 如onsubmit：自动提交之前触发，如果验证未通过，可取消继续提交
    • 何时使用：取消元素默认的事件行为
      
      • 在html中绑定事件处理函数：2个return
        
        • valiAll(){ return true/false; }
      • 在JS中动态绑定处理函数
        
        • 如何取消：if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue = false }
• 事件坐标：3种
  
  • 相对于显示器左上角：
    
    • 最大值：screen.availWidth/Height
    • 鼠标位置：e.screenX/Y
  • 相对于文档显示区左上角：
    
    • 最大值：window.innerWidth/Height
    • 鼠标位置：e.clientX/Y
  • 相对于父元素左上角：
    
    • 最大值：父元素的宽和高
    • 鼠标位置：e.offsetX/Y
• 页面滚动
  
  • 事件：window.onscroll
  • document.documentElement.scrollTop
  • document.body.scrollTop