事件冒泡、监听、委托

事件冒泡

事件冒泡是从自己开始一层一层往外传播事件的过程。一个完整事件流一定是包含捕获 -> 目标 -> 冒泡 这样一个完整过程，但是浏览器在处理事件的时候默认在冒泡阶段处理
IE浏览器不认识捕获，只能在冒泡阶段处理
如果某些情况下不希望冒泡，那么可以阻止
阻止冒泡的兼容写法：阻止事件从当前元素往外传播

document.querySelector('#father').onclick = function (e) {
  console.log('father')
  e = e || window.event
  **if (e.stopPropagation) {
    e.stopPropagation()
  } else {
    e.cancelBubble = true
  }**
}

事件监听

1个参数是不带on的事件类型的字符串

2个参数传事件处理函数
3个参数是否捕获，true代表在捕获阶段处理事件，false冒泡，默认值为false
oBox.addEventListener(‘click’, function () {
console.log(‘box’)
}, true)
兼容写法:
function fn () {
console.log(‘box’)
}
if (oBox.attachEvent) {
// IE
oBox.attachEvent(‘onclick’, fn)
} else {
// 普通浏览器
oBox.addEventListener(‘click’, fn)
}
事件重复监听
绑定DOM0级对于添加事件的方式：一个元素的同类型事件只能绑定一个，如果多次绑定后面 的覆盖前面的
监听DOM2级对于事件的处理： 可以给一个元素监听多个同类型事件，他们都会触发。先监听，先执行。开发中一般都用监听
oBox.addEventListener(‘click’, function () {
console.log(‘box1’)
})
oBox.addEventListener(‘click’, function () {
console.log(‘box2’)
})
监听取消
function fn () {
console.log(‘box1’)
}
oBox.addEventListener(‘click’, fn)
oBox.addEventListener(‘click’, function () {
console.log(‘box2’)
})
btn.addEventListener(‘click’, function () {
// 移除监听的函数和添加监听必须是同一个函数（地址相同）
oBox.removeEventListener(‘click’, fn)
})

或者在js里封装起来
/**

• 添加事件监听
• @param ele 添加事件的DOM元素
• @param type 事件类型（不带on）
• @param fn 事件处理函数
• @param [isCapture] 可选参数，是否捕获，true代表捕获，false代表冒泡，默认为false
  /
  on: function (ele, type, fn, isCapture) {
  // 如果参数没有传，默认值为false
  if (isCapture === undefined) isCapture = false
  if (ele.attachEvent) {
  // IE
  ele.attachEvent(‘on’ + type, fn)
  } else {
  ele.addEventListener(type, fn, isCapture)
  }
  },
  /*
• 移出事件监听
• @param ele 添加事件的DOM元素
• @param type 事件类型（不带on）
• @param fn 事件处理函数
• @param [isCapture] 可选参数，是否捕获，true代表捕获，false代表冒泡，默认为false
  */
  off: function (ele, type, fn, isCapture) {
  // 如果参数没有传，默认值为false
  if (isCapture === undefined) isCapture = false
  if (ele.detachEvent) {
  ele.detachEvent(‘on’ + type, fn)
  } else {
  ele.removeEventListener(type, fn, isCapture)
  }
  },

事件委托

事件委托的原理：事件冒泡
事件委托优点：
1、方便
2、可以给不确定的元素添加事件（后创建的）

鼠标滚轮

// 这个事件在火狐里不生效
oBox.onmousewheel = function (e) {
e = e || window.event
console.log(e)
if (e.wheelDeltaY < 0) {
// 向下
oContent.style.height = oContent.offsetHeight + 10 + ‘px’
} else {
// 向上
oContent.style.height = oContent.offsetHeight - 10 + ‘px’
}
}

// 火狐的写法
oBox.addEventListener('DOMMouseScroll', function (e) {
  console.log(e)
  if (e.detail > 0) {
    // 向下
    oContent.style.height = oContent.offsetHeight + 10 + 'px'
  } else {
    oContent.style.height = oContent.offsetHeight - 10 + 'px'
  }
})