javascript事件及事件绑定

事件

1. 事件流

   事件流是描述从页面中接收事件的顺序，包括事件冒泡流和事件捕获流。

2. 事件冒泡（IE事件流）

   事件开始时从触发事件的那个元素一级一级向上传播，从而触发上面的每一级，知道传播到document对象

   <div id="grandfather">
           <div id="father">
               <div id="son"></div>
           </div>
   </div>
   当触发了son这个事件标签就会一级一级向上传播 son->father->grandfather
   

3. 事件捕获

   事件开始时从不太具体的元素出发捕捉到预定目标元素

   <div id="grandfather">
           <div id="father">
               <div id="son"></div>
           </div>
   </div>
   事件捕获过程中，documnt首先接受到事件，然后沿着dom树一次向下一知道找到实际目标
   假如实际目标时son 那么触发过程就是 document->html->body->granderfather->faher->son 
   

4. DOM事件流

   事件流包含三个阶段：

   1. 事件捕获阶段

   2. 处于目标阶段

   3. 事件冒泡阶段

      我们可以借助事件流来确定什么阶段来触发事件

5. 绑定事件

   1. dom 0级事件

      • div.onclick = function( ){ 事件处理函数 }

   2. dom 2级事件

      • addEventListener( ‘click’ ,function( ) { 事件处理函数 },boolean ) //标准浏览器中使用

        // 多个事件处理函数绑定的时候,顺序绑定顺序执行

        =>boolean 默认为false即为冒泡阶段触发 true为捕获阶段触发

        div.addEventListener('click', function () {
                  
                  
                  console.log('你好 世界')
                })
        
                div.addEventListener('click', function () {
                  
                  
                  console.log('hello world')
                })
        
        //你好 世界
        //hello world
        

      • attachEvent( ‘onclick’ ,function ( ) { 事件处理函数 }} //IE低版本中使用

        扫描二维码关注公众号，回复： 11995730 查看本文章

        //多个事件处理函数绑定的时候,顺序绑定倒叙执行. This -> window

        div.attachEvent('onclick', function () {
                  
                  
                  console.log('你好 世界')
                })
        
                div.attachEvent('onclick', function () {
                  
                  
                  console.log('hello world')
                })
        
                div.attachEvent('onclick', function () {
                  
                  
                  console.log('我被点击了')
                })
        //我被电击了
        //hello world
        //你好 世界
        

      • 封装一个兼容函数

        function on(ele, type, handler) {
                  
                  
                  if (!ele) throw new Error('请按照规则传递参数')
                  if (ele.nodeType !== 1) throw new Error('事件源有问题')
        
                  // 2. 兼容处理
                  // div.addEventListener()
                  // div.attachEvent()
                  // 只要 元素 身上有这个函数, 就可以执行
                  // 没有这个函数就去换另一个函数试试
                  if (ele.addEventListener) {
                  
                  
                    ele.addEventListener(type, handler)
                  } else if (ele.attachEvent) {
                  
                  
                    ele.attachEvent('on' + type, handler)
                  } else {
                  
                  
                    // 对象操作语法 - 点语法
                    // ele.onclick = handler
                    // 对象操作语法 - 数组关联语法
                    // ele['onclick'] = handler
                    ele['on' + type] = handler
                  }
                }
        

6. 事件解绑

   1. dom 0级解绑

      • div.onclick = null

   2. dom 2级解绑

      • removeEventListener( ‘要解绑的事件类型’ , 要解绑的函数) //标准浏览器

      • detachEvent(‘on事件类型’, 要解绑的事件处理函数) // IE低版本

   3. 封装一个兼容函数

      // 事件解绑封装
              function off(ele, type, handler) {
              
              
                if (!ele) throw new Error('请按照规则传递参数')
                if (ele.nodeType !== 1) throw new Error('事件源有问题')
                // 处理解绑的兼容
                if (ele.removeEventListener) {
              
              
                  ele.removeEventListener(type, handler)
                } else if (ele.detachEvent) {
              
              
                  ele.detachEvent('on' + type, handler)
                } else {
              
              
                  ele['on' + type] = null
                }
              }
      

7. 鼠标事件的事件对象信息(clientX , offsetX, pageX)

   1. 什么是事件对象?

      • 每一次事件触发, 都会获取一个最新的事件对象
      • 对当前这一次事件的描述

      //获取事件对象
       // + 标准浏览器
                  //   => 直接在事件处理函数上接收一个形参
                  //   => 会在事件触发的时候, 由浏览器自动传递实参
                  // + IE 低版本
                  //   => 不需要接收形参
                  //   => 直接使用 window.event
                  //     -> 在标准浏览器下也可以使用
                  //     -> 官方给的还是兼容
                  // + 书写一个兼容方式
                  //e = e || window.event
      

   2. clientX , clientY

      • 光标距离可视窗口左上角的位置

   3. pageX , pageY

      • 光标距离文档流左上角的位置

   4. offsetX , offsetY

      • 光标距离元素左上角的位置. 元素: 光标触发事件的元素(不是事件源)
      • offsetX和offsetY表示（鼠标位置）相对于最近父级元素的坐标（无论父级是否定位）（不管是谁触发）
      • 如果你不想按照里面光标触发元素的左上角计算坐标. 就像按照事件源来计算坐标css 样式 pointer-event: none;