事件知识点

这是我参与「第四届青训营 」笔记创作活动的第9天

事件的绑定方式

• 我们现在给一个注册事件都是使用 onxxx 的方式

• 但是这个方式不是很好，只能给一个元素注册一个事件

• 一旦写了第二个事件，那么第一个就被覆盖了

  oDiv.onclick = function () {
    console.log('我是第一个事件')
  }
  ​
  oDiv.onclick = function () {
    console.log('我是第二个事件')
  }
  

  • 当你点击的时候，只会执行第二个，第一个就没有了

• 我们还有一种事件监听的方式去给元素绑定事件

• 使用 addEventListener 的方式添加

  • 这个方法不兼容，在 IE 里面要使用 attachEvent

事件监听

• addEventListener : 非 IE 7 8 下使用

• 语法： 元素.addEventListener('事件类型'， 事件处理函数， 冒泡还是捕获)

  oDiv.addEventListener('click', function () {
    console.log('我是第一个事件')
  }, false)
  ​
  oDiv.addEventListener('click', function () {
    console.log('我是第二个事件')
  }, false)
  

  • 当你点击 div 的时候，两个函数都会执行，并且会按照你注册的顺序执行
  • 先打印 我是第一个事件 再打印 我是第二个事件
  • 注意： 事件类型的时候不要写 on，点击事件就是 click，不是 onclick

• attachEvent ：IE 7 8 下使用

• 语法： 元素.attachEvent('事件类型'， 事件处理函数)

  oDiv.attachEvent('onclick', function () {
    console.log('我是第一个事件')
  })
  ​
  oDiv.attachEvent('onclick', function () {
    console.log('我是第二个事件')
  })
  

  • 当你点击 div 的时候，两个函数都会执行，并且会按照你注册的顺序倒叙执行
  • 先打印 我是第二个事件 再打印 我是第一个事件
  • 注意： 事件类型的时候要写 on，点击事件就行 onclick

两个方式的区别

• 注册事件的时候事件类型参数的书写

  • addEventListener ： 不用写 on
  • attachEvent ： 要写 on

• 参数个数

  • addEventListener ： 一般是三个常用参数
  • attachEvent ： 两个参数

• 执行顺序

  • addEventListener ： 顺序注册，顺序执行
  • attachEvent ： 顺序注册，倒叙执行

• 适用浏览器

  • addEventListener ： 非 IE 7 8 的浏览器
  • attachEvent ： IE 7 8 浏览器