一、 内联绑定事件

可以通过传入this， this指向元素本身

<div onclick="var a = 1; console.log(a); console.log(this)">CLICK ME</div>
// 1
// div对象

<div onclick="fun(this)">CLICK ME</div>

<script>
  function fun(_this) {
    console.log(_this) // 当前元素
    console.log(this) // window or undefined (严格模式)
  }
</script>

解绑： dom.onclick = null

原因在于dom.onclick=func方式的事件绑定会覆盖以内联方式绑定的事件

二、 通过js绑定(两种方式)

方式1： dom.onclick = func

func 参数是event，func内部的this指向当前元素

<div id="test">CLICK ME</div>

document.getElementById('test').onclick = function (e) {
  console.log(this.id) // 'test'
  console.log(e) // event对象
}

注意

• 这种方式只能绑定一次，无法重复绑定

<div id="test">CLICK ME</div>

document.getElementById('test').onclick = function (e) {
  console.log(this.id)
}
document.getElementById('test').onclick = function (e) {
  console.log(this.id)
}

// 只会输出一次 'test'

• 会覆盖以内联方式绑定的事件

<div id="test">CLICK ME</div>

<div id="test" onclick="console.log('内联')">CLICK ME</div>

document.getElementById('test').onclick = function (e) {
  console.log('dom.onclick = func')
}

// 'dom.onclick = func'

解绑方式

dom.onclick = null

document.getElementById('clickme').onclick == null

方式2： target.addEventListener(type, listener[, useCapture])

• target : 表示要监听事件的目标对象，可以是一个文档上的元素 Document 本身，Window 或者 XMLHttpRequest

• type : 表示事件类型的字符串，比如: click、change

• listener : 事件处理函数，参数event。

• useCapture : 设置事件处理函数执行的时机，捕获或冒泡阶段 ，true: 捕获，false: 冒泡，默认为 false

查看addEventListener详解

可以绑定多个函数, 多个函数的执行顺序按照绑定的顺序执行，并且与useCapture参数无关

<div id="test">CLICK ME</div>
var div = document.getElementById('test')
div.addEventListener('click', fun1)
div.addEventListener('click', fun2, true)

不会覆盖内联绑定事件

div id="test" onclick="console.log('内联')">CLICK ME</div>

document.getElementById('test').addEventListener('click', () => console.log('addEventListener'))

// '内联'
// 'addEventListener'

解绑方式

removeEventListener 所有参数需要与绑定时候addEventListener的参数完全一致才能有效解绑

<div id="test">CLICK ME</div>

div.addEventListener('click', fun2) // useCapture默认为false
div.removeEventListener('click', fun2, false)

div.addEventListener('click', fun1, true)
div.removeEventListener('click', fun1, true)

不同绑定方式的执行顺序比较

执行顺序只和绑定顺序有关

阻止冒泡

event.stopPropagation(), IE8以及以上可以通过 window.event.cancelBubble=true 来阻止

function stopBubble(e) { 
  if ( e && e.stopPropagation ) e.stopPropagation()
  else window.event.cancelBubble = true
}

阻止默认事件

function stopDefault( e ) { 
  if ( e && e.preventDefault ) e.preventDefault()
  else window.event.returnValue = false
  return false
}

其他

• 一般情况下：事件的回调函数第一步 stopBubble(e)