事件

事件绑定

// 通用的事件绑定函数
function bindEvent(elem, type, selector, fn) {
  if (fn == null) {
    fn = selector
    selector = null
  }
  elem.addEventListener(type, event => {
    const target = event.target
    if (selector) {
      // 代理绑定
      // target.matches dom 元素是不是符合 css 选择器
      if (target.matches(selector)) {
        fn.call(target, event)
      }
    } else {
      // 普通绑定
      fn.call(target, event)
    }
  })
}
const btn1 = document.getElementById('btn1')
bindEvent(btn1, 'click', e => {
  // 获取触发的元素
  console.log(e.target)
  event.preventDefault() // 阻止默认行为
  alert('clicked')
})

事件冒泡

function bindEvent(elem, type, selector, fn) {
  if (fn == null) {
    fn = selector
    selector = null
  }
  elem.addEventListener(type, event => {
    const target = event.target
    if (selector) {
      // 代理绑定
      // target.matches dom 元素是不是符合 css 选择器
      if (target.matches(selector)) {
        fn.call(target, event)
      }
    } else {
      // 普通绑定
      fn.call(target, event)
    }
  })
}

const btn1 = document.getElementById('btn1')
bindEvent(btn1, 'click', e => {
  // 获取触发的元素
  console.log(e.target)
  event.preventDefault() // 阻止默认行为
  alert(this.innerHTML)
})

const p1 = document.getElementById('p1')
bindEvent(p1, 'click', e => {
  // 阻止事件冒泡
  e.stopPropagation()
  console.log('激活')
})
const body = document.body
bindEvent(body, 'click', e => {
  console.log('body clicked')
  console.log(event.target)
})

const div2 = document.getElementById('div2')
bindEvent(div2, 'click', e => {
  console.log('div2 clicked')
  console.log(e.target)
})

事件代理

• 代码简洁
• 减少浏览器内存占用

// 事件代理
// 通过事件冒泡
// 给 id 为 div3 的 div 中的所有的 a 标签绑定一个点击事件
const div3 = document.getElementById('div3')
bindEvent(div3, 'click', e => {
  e.preventDefault()
  const target = e.target
  if (target.nodeName === 'A') {
    alert(target.innerHTML)
  }
})

阅读量：

评 论：