JavaScript events and event binding

event

Event stream

Event flow describes the sequence of receiving events from the page, including event bubbling flow and event capture flow.

Event bubbling (IE event stream)

When the event starts, it propagates up from the element that triggered the event level by level, so that each level above is triggered, knowing that it is propagated to the document object

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

Event capture

Starting from less specific elements at the beginning of the event to capture the predetermined target element

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

DOM event flow

The event flow consists of three stages:
1. Event capture phase
2. In the target stage
3. Event bubbling phase
  
  We can use the event flow to determine what stage to trigger the event

Bound event

dom level 0 event
- div.onclick = function( ){ event handling function}

dom level 2 event

addEventListener('click' ,function() {event processing function},boolean) //Used in standard browser

// When multiple event processing functions are bound, the binding is executed sequentially

=>boolean The default is false, which means the bubbling phase is triggered, and true means the capture phase is triggered.

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

        div.addEventListener('click', function () {
          
          
          console.log('hello world')
        })

//你好 世界
//hello world

attachEvent('onclick' ,function () {event processing function}} //Used in lower versions of IE

//When multiple event handlers are bound, the binding is executed in flashback sequence. This -> window

div.attachEvent('onclick', function () {
          
          
          console.log('你好 世界')
        })

        div.attachEvent('onclick', function () {
          
          
          console.log('hello world')
        })

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

Encapsulate a compatible function

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
          }
        }

Event unbind

dom level 0 unbinding
- div.onclick = null
dom level 2 unbinding
- removeEventListener('Event type to be unbound', function to be unbound) //Standard browser
- detachEvent('on event type', event processing function to be unbound) // IE low version

Encapsulate a compatible function

// 事件解绑封装
        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
          }
        }

Event object information for mouse events (clientX, offsetX, pageX)
1. What is an event object?
  - Every time an event is triggered, a newest event object will be obtained
  - A description of the current incident
```
//获取事件对象
 // + 标准浏览器
            //   => 直接在事件处理函数上接收一个形参
            //   => 会在事件触发的时候, 由浏览器自动传递实参
            // + IE 低版本
            //   => 不需要接收形参
            //   => 直接使用 window.event
            //     -> 在标准浏览器下也可以使用
            //     -> 官方给的还是兼容
            // + 书写一个兼容方式
            //e = e || window.event
```
2. clientX, clientY
  - The position of the cursor from the upper left corner of the visible window
3. pageX, pageY
  - The position of the cursor from the upper left corner of the document stream
4. offsetX , offsetY
  - The position of the cursor from the upper left corner of the element. Element: The element that the cursor triggered the event (not the source of the event)
  - offsetX and offsetY represent (mouse position) relative to the coordinates of the nearest parent element (regardless of whether the parent is positioned) (regardless of who triggered it)
  - If you don’t want to calculate the coordinates according to the upper left corner of the cursor trigger element inside. It is like calculating the coordinates according to the event source css style pointer-event: none;