一、 内联绑定事件
可以通过传入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
可以绑定多个函数, 多个函数的执行顺序按照绑定的顺序执行，并且与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)
