JavaScript-15

DOM事件绑定

DOM0级别事件绑定

DOM0级别：DOM最早版本的事件绑定方式，被所有浏览器兼容

HTML绑定

<input type="button" id="btn" value="click" onclick="show()" />

JS绑定

document.getElementById("btn").onclick = show

function show() {
	console.log(1)
}

document.getElementById("btn").onclick = function () {
		console.log(1)
}	

JS绑定事件时，不能加()，否则会在页面加载时立即执行
可以绑定匿名函数

DOM2级别事件绑定

DOM2级别：添加了两个监听方法来添加和移除事件处理程序

addEventListener()

document.getElementById("btn").addEventListener("click", show)

document.getElementById("btn").addEventListener("click", function () {
		console.log(1)
})

第一个参数为事件名，不加on
第二个参数为函数名，不加引号
第二个参数为函数名，不加括号(）
可以绑定匿名函数

removeEventListener()

document.getElementById("btn").removeEventListener("click", show)

无法移除匿名添加的函数

DOM0级事件和DOM2级事件区别

DOM0级事件只能绑定一个函数，前面绑定的函数会被覆盖

document.getElementById("btn").onclick = function () {
		console.log(1)
}
document.getElementById("btn").onclick = function () {
		console.log(2)
}
document.getElementById("btn").onclick = function () {
		console.log(3)
}

DOM2级事件只能可以绑定多个函数，且有执行顺序

document.getElementById("btn").addEventListener("click", function () {
		console.log('a')
})
document.getElementById("btn").addEventListener("click", function () {
		console.log('b')
})
document.getElementById("btn").addEventListener("click", function () {
		console.log('c')
})

DOM0级事件与DOM2级事件互不影响

function show() {
	console.log('show')
}
document.getElementById("btn").addEventListener("click", show)
document.getElementById("btn").onclick = show

DOM2级事件拥有事件流，分为三个阶段

1. 捕获事件阶段
2. 处于目标阶段
3. 事件冒泡阶段

可通过第三个可选参数控制事件流

事件传参

<input type="button" id="btn" value="click" />

document.getElementById("btn").onclick=foo('hello')
function foo(x) {
	console.log(x)
}

无法绑定成功，加括号会直接执行

<input type="button" id="btn" value="click" onclick="foo('hello')" />

行内绑定，注意加引号

document.getElementById("btn").onclick=function () {
	console.log('hello')
}

使用匿名函数

<input type="button" id="btn" value="1" onclick="show()" />
<input type="button" id="btn" value="2" onclick="show()" />
<input type="button" id="btn" value="3" onclick="show()" />

event为默认参数，不需传入即可调用，该对象表示触发的事件本身
event.target会返回触发该事件的目标元素

function show() {
	console.log(event)
}

function show() {
	console.log(event.target.value)
}

行内调用时，传入this，this代表该元素本身

<input type="button" id="btn" value="1" onclick="show(this)" />

function show(el) {
	console.log(el.value)
}

常用事件