JS//DOM事件、事件

JS——DOM事件、事件

一、DOM 事件

1.1 DOM 事件级别

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

1.2 DOM 事件模型

捕获、冒泡

1.3 DOM 事件流

捕获阶段
目标阶段
冒泡阶段

1.4 描述DOM事件捕获的具体流程

window → document → html → body → … → 目标元素

1.5 Event对象常见应用

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

1.6 自定义事件

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

二、事件

1 知识点

1.1 通用事件绑定

1.2 事件冒泡

1.3 代理

代理的好处：
① 代码简洁
② 减少浏览器内存占用

1.4 完善通用事件绑定

2 问答

题目：
*编写一个通用的事件监听函数
*描述事件冒泡流程
*对于一个无限下拉加载图片的页面，如何给每个图片绑定事件

2.1 编写一个通用的事件监听函数

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 对于一个无限下拉加载图片的页面，如何给每个图片绑定事件

使用代理
知道代理的两个优点（代码简洁；减少浏览器内存占用）