事件

题目

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

// 绑定事件的兼容代码
function bindEvent(elem, type, fn) {
  if (elem.addEventListener) {
    // addEventListener 的第三个参数 可选，布尔值，指定事件是在捕获阶段还是在冒泡阶段执行
    // 默认是false，在冒泡阶段实行
    elem.addEventListener(type,fn,false)
  } else if (elem.attachEvent) {
    elem.attachEvent("on"+type,fn)
  } else {
    elem["on"+type] = fn
  }
}

//解绑事件的兼容代码
function removeEvent(elem, type, fn) {
  if (elem.removeEventListener) {
    elem.removeEventListener(type,fn,false)
  } else if (elem.detachEvent) {
    elem.detachEvent("on"+type,fn)
  } else {
    elem["on"+type] = null
  }
}

2. 描述事件冒泡的流程
3. 无限下拉的图片列表，如何监听每个图片的点击？

// 使用事件代理
// 用event.target来获取触发元素
// 用matches来判断是否是触发元素
比如  event.target.matches(selector)  //判断当前目标元素是否匹配selector这个选择器，匹配返回true，否则返回false

知识点

• 事件绑定(响应某个事件的函数就叫事件处理程序或事件侦听器)

//四种方式
// 直接在元素上绑定回调函数 (HTML事件处理程序)
 <button id="btn" onclick="clickBtn()">click me</button>

// JS获取baiDOM元素对象后，对onclick属性赋值，绑定事件:（DOM0级事件处理程序）
document.getElementById('btn').onclick=clickBtn;

//JS获取DOM对象后，调用对象的addEventListener函数绑定事件：（DOM2级事件处理程序）
document.getElementById('btn').addEventListener('click',clickBtn);

// IE事件处理程序  attachEvent 与 addEventListener一样，也可以用来为一个元素添加多个事件处理程序,
// 但是执行顺序是相反的，addEventListener添加的是按照添加顺序执行的，而attachEvent 是按照添加的相反顺序执行的
const btn = document.getElementById('myBtn')
btn.attachEvent('onclick', function(){
    console.log('clicked')
})

// 注意
// 在IE中使用attachEvent  与 使用 DOM0级方法的主要区别在于事件处理程序的作用域。
// 在使用DOM0级方法的情况下，事件处理程序会在其所属元素的作用域内运行；
// 在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此this等于window
const btn = document.getElementById('myBtn')
btn.attachEvent('onclick', function(){
    console.log( this === window)   // true
})

• 事件冒泡(事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点)

e.stopPropergation()  //阻止事件的冒泡
e.preventDefault() //阻止事件的默认行为，比如a标签跳转

• 事件捕获(不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件)
• DOM事件流(DOM2级事件规定的事件流包括三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段)
  首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后是冒泡阶段，可以在这个阶段对事件做出响应
• 事件代理(事件委托)
  对事件处理程序过多问题的解决方案就是事件代理。事件代理利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如，click事件会一直冒泡到document层次。也就是说，我们可以为整个页面指定一个onclick事件处理程序，而不必给每个可单击的元素分别添加事件处理程序
  事件代理的好处

1. 代码简洁
2. 减少浏览器内存占用
3. 不要滥用