JavaScript——DOM事件绑定

---

一、DOM0级别事件绑定

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

1.HTML绑定

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

2.JS绑定

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

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

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

二、DOM2级别事件绑定

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

1.addEventListener()

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

document.getElementById('btn').addEventListener('click',function(){})

2.removeEventListener()

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

注意：无法移除匿名添加的函数

三、DOM0级事件和DOM2级事件区别

• DOM0级事件只能绑定一个函数，前面绑定的函数会被覆盖
• DOM2级事件只能可以绑定多个函数，且有执行顺序
• DOM0级事件与DOM2级事件互不影响
• DOM2级事件拥有事件流，分为三个阶段：
  1.捕获事件阶段
  2.处于目标阶段
  3.事件冒泡阶段

四、常用事件

事件	说明
onload	页面完成加载
onclick	用户点击了HTML元素
onchange	HTML元素已被改变
onkeyup	用户按下键盘按键松开后
onblur	元素失去焦点
onfocus	元素获得焦点
onmouseover	用户把鼠标移动到HTML元素上
onmouseout	用户把鼠标移开HTML元素
onmousemove	用户移动鼠标