JS//DOM events, events

JS-DOM events, events

1. DOM events

1.1 DOM event level

DOM0：element.onclick = function(){
    
    };
DOM2：element.addEventListner('click', function(){
    
    }, false);
DOM3：element.addEventListener('keyup', function(){
    
    }, false);
注：DOM1级没有涉及事件，不是没有DOM1标准。
（true为捕获，false为冒泡，默认值为false）

1.2 DOM event model

Capture, bubbling

1.3 DOM event flow

Capture phase
Target phase
Bubbling phase

1.4 Describe the specific process of DOM event capture

window → document → html → body →… → target element

1.5 Common Applications of Event Objects

event.preventDefault()  // 阻止默认事件
event.stopPropagation()  // 阻止冒泡
event.stopImmediatePropagation()  // 组织调用相同事件的其它侦听器（事件响应优先级）
event.currentTarget()
event.target()

1.6 Custom Event

var event1 = new Event('test');
ev.addEventListener('test', function(){
    
    
      console.log('abc');
});
ev.dispatch(event);

Second, the event

1 knowledge points

1.1 General event binding

1.2 Event bubbling

1.3 Agency

Benefits of the proxy:
① The code is concise
② The memory usage of the browser is reduced

1.4 Improve general event binding

2 Q&A

Topic:
*Write a general event listener function
*Describe the event bubbling process
*For a page with unlimited drop-down loading pictures, how to bind events to each picture

2.1 Write a general event listener function

function bindEvent(elem, type, selector, fn) {
    
    
if (fn == null) {
    
    
    fn = selector
    selector = null
}
elem.addEventListener(type, function(e) {
    
    
    var target
    if (selector) {
    
    
      target = e.target
      if (target.matches(selector)){
    
    
        fn.call(target, e)
      }
    } else {
    
    
      fn(e)
    }
  }) 
}

2.3 For a page with unlimited drop-down loading pictures, how to bind events to each picture

Use proxy
Know the two advantages of proxy (concise code; reduce browser memory usage)